Dynamic Anagular UIの日付ピッカーが同時に開く

Question

配列に日付ピッカーが多いページがあります。 datepicker ng-repeatはネストされたng-repeat内にあります。問題は、1つの日付ピッカーをクリックすると、他のすべての日付ピッカーが同時に開くときです。

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 =関数（$スコープ、$コントローラ、$フィルタ、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

私は、日付ピッカーのidのは、なぜ彼らはすべて

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

Answer 2

のようなIDの何か、私は答えを得たを変更しようとするを開いているということと同じだと思います。 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; 
     };