动态无网格用户界面同时打开

Question

我有一个页面，在数组中有很多数据显示。数据报警器ng-重复在嵌套的ng-重复中。问题是，当在点击一个数据报警器，所有其他数据启动器在同一时间打开。

HTML: //

    <div data-ng-repeat="skill in skillset" ng-model="skill.length">
        <div class="col-sm-3">
            <input type="hidden" ng-model="skill.pk" ng-value="{{skill.pk}}"/>
            <ol class="form-control nya-bs-select textbox" name="Skill Set" title="Skill" data-live-search="true" validType="select"
                disabled="isProfile" ng-model="skill.skillId" ng-selected="{{skill.skillId}}">
                <li nya-bs-option="skillSet in skillSets | orderBy: 'skillSet' track by skillSet.pk" data-value="skillSet.pk">
                    <a>
                        {{skillSet.code}}
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
            </ol>
        </div>

        <div class="col-sm-2">              
            <select class="dropdown" ng-model="skill.isPrimary" ng-options="skillset.value as skillset.name for skillset in register.skillsets"></select>
        </div>

        <div ng-repeat="dt in dates" class="col-sm-2">
            <input id="datePickerItem_{{$index}}" type="text" class="datepicker" uib-datepicker-popup="shortDate" 
                   ng-value="skill.sinceLastUsed" ng-model="skill.sinceLastUsed"  is-open="dt.opened" ng-click="open($event,dt)"
                   placeholder="Last Used Date" name="lastuseddate" validType="date" datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"/>
        </div>

        <div class="col-sm-2">
            <span uib-rating ng-model="skill.rating" max="5" min="1"  enable-reset="false"></span>
        </div>

        <div class="col-sm-3">
            <button type="button" class="fa fa-minus-circle remove" ng-click="deleteSkill($index)" ng-show="skillset.length>1" data-toggle="tooltip"
                    data-placement="bottom" title="Delete Skill"></button>
            <button type="button" class="fa fa-floppy-o remove" ng-click="saveSkill($index)" data-toggle="tooltip" data-placement="bottom" title="Save Skill"></button>
            <button type="button" class="fa fa-plus-circle remove" ng-show="$last" ng-click="addNewSkill($index)"
                    data-toggle="tooltip" data-placement="bottom" title="Save and Add New Skill"></button><br /><br />
        </div>
    </div>
</div>

​

Javascript：(函数(角){ var SkillSetController = function ($scope，$controller，$filter，commonAPIservice，candidateCommonServices) ){

    //Initialization
    var _this = this;
    _this.title = "Skillset";
    _this.service = commonAPIservice;
    _this.CandidateCommonServices = candidateCommonServices;
    $scope.skillset = [];
    $scope.dates = []; 


    //Button Tooltips
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });

    //Function to load Skills Autocomplete
    var loadSkillSets = function () {
        var url = 'http://localhost:8080/api/skillset';
        _this.service.loadRecords(url)
                     .then(function (response) {
                         $scope.skillSets = response.data.skillSets;
                     });
    };

    //Function to load Candidate Skill Sets 
    var loadCandidateSkillSets = function () {
        var candidateId = _this.CandidateCommonServices.getCandidateId();
        if (candidateId > 0) {
            var url = 'http://localhost:8080/api/CandidateSkillSet/GetCandidateSkillSet/' + candidateId;
            _this.service.loadRecords(url)
                         .then(function (response) {
                             var skillSetLength = response.data.length;
                             if (skillSetLength > 0) {
                                 $scope.skillset = response.data;
                                 $scope.dates = [{}];
                                 angular.forEach($scope.skillset, function (value, key) {                                         
                                         var sinceLastUsed = new Date($scope.skillset[key].sinceLastUsed);
                                         $scope.skillset[key].sinceLastUsed = ((sinceLastUsed.getMonth() + 1) + "/" + sinceLastUsed.getDate() + "/" + sinceLastUsed.getFullYear());

                                 });
                             }
                             else {
                                 $scope.skillset = [$scope.candidateSkillSetForm];
                                 $scope.dates = [{}];
                             }
                         });
        }
    };

    //Function to save and add new Skill
    $scope.addNewSkill = function (recordIndex) {            
        var skillset = $scope.skillset[recordIndex];
        if (skillset.pk >= 0 )
            $scope.skillset.push({});
        else {
            if (!skillset.skillId || !skillset.rating || !skillset.sinceLastUsed || typeof skillset.isPrimary == 'undefined') {
                perfUtils.getInstance().successMsg('All Fields are mandatory');
                return;
            }
            var candidateId = _this.CandidateCommonServices.getCandidateId();
                if (candidateId > 0) {
                    var skillset = $scope.skillset[recordIndex];
                        skillset.candidateId = candidateId;
                        _this.service.add('http://localhost:8080/api/CandidateSkillSet/AddCandidateSkillSet/', skillset)
                            .then(function (response) {                                   
                                perfUtils.getInstance().successMsg(_this.title + ' added Successfully!');
                            });     
                }
                $scope.skillset.push({});
        }
    };

    //Function to Save skill
    $scope.saveSkill = function (recordIndex) {
        var skillset = $scope.skillset[recordIndex];
        if (!skillset.skillId || !skillset.rating || !skillset.sinceLastUsed || typeof skillset.isPrimary == 'undefined') {
            perfUtils.getInstance().successMsg('All Fields are mandatory');
            return;
        }
        var candidateId = _this.CandidateCommonServices.getCandidateId();
        if (candidateId > 0) {
            if (skillset.pk > 0) {
                alert("Updated Successfully");                 
            }
            else
            {
                skillset.candidateId = candidateId;
                _this.service.add('http://localhost:8080/api/CandidateSkillSet/AddCandidateSkillSet/', skillset)
                    .then(function (response) {                            
                        loadCandidateSkillSets();
                        perfUtils.getInstance().successMsg(_this.title + ' added Successfully!');
                    });
            }
        }
    };

    //Function to Delete Skill
    $scope.deleteSkill = function (recordIndex) {
        var candidateId = _this.CandidateCommonServices.getCandidateId();
        var skillset = $scope.skillset[recordIndex]; 
        if (candidateId > 0 && typeof skillset.isPrimary != 'undefined') {
            _this.service.updateDel('http://localhost:8080/api/CandidateSkillSet/DeleteCandidateSkillSet/',skillset)
                .then(function (response) {
                    $scope.skillset.splice(recordIndex, 1);
                    perfUtils.getInstance().successMsg(_this.title + ' deleted Successfully!');
                });
        }
        else
            $scope.skillset.splice(recordIndex, 1);
    };

    **//Function to open Datepicker
    $scope.open   = function ($event, dt) {
        $event.preventDefault();
        $event.stopPropagation();
        dt.opened = true;
    };**



    //Load Skill Type Dropdown
    $scope.register = {};
    $scope.register.skillsets = [{
        value: true,
        name: "Primary"
    }, {
        value: false,
        name: "Secondary"
    }];

    //Star Rating Directive
    $scope.ratingStates = { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' };

    //Functions during page load
    loadCandidateSkillSets();
    loadSkillSets();
};
SkillSetController.$inject = ['$scope', '$controller','$filter', 'commonAPIservice', 'candidateCommonServices'];
mainApp.controller('skillSetController', SkillSetController);

}(角)；

Answer 1

我认为datepicker id是一样的，这也是为什么他们都开始尝试更改id的原因。

id="datePickerItem_{{$parent.$index}}_{{$index}}"

Answer 2

我知道答案了。在HTML中，设置：

id="datePickerItem_{{$parent.$index}}_{{$index}}
is-open="opened[$parent.$index]
ng-click="open($event, $parent.$index)

Javascript：

  $scope.opened = [];
        $scope.open   = function ($event, index) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.opened[index] = true;
        };