ng-repeat의 각도 UI 날짜 피커가 첫 번째 블록에만 적용됩니다.

Question

ng-repeat 블록 내에서 각도 ui datepicker를 사용할 때 datepicker는 첫 번째 블록에 대해서만 올바르게 작동합니다. 나머지 반복 블록의 경우 캘린더가 표시되지만 날짜를 선택할 수 없습니다.

누군가 내가 어떻게 작동시킬 수 있는지 말해 줄 수 있습니까? $ 부모와 모델 이름을 추가하려고했지만 그 didnt 도움.

제품 목록이 있으며 각 제품에 대해 두 개의 날짜 필드가있는 새로운 릴리스 양식이 있습니다. ng-repeat를 사용하여 제품을 표시하고 릴리스 추가를 클릭하면 해당 제품 블록의 릴리스 양식이 채워집니다. 형식은

<form data-ng-submit="addRelease(b)"> 
<div class="form-field-container"> 
    <label for="from">From</label> 
    <input class="datePicker" data-date-format="yyyy-mm-dd" type="text" 
    placeholder="yyyy-mm-dd" data-ng-model="from" id="from" required> 
    <br/> 
    <label for="to">To</label> 
    <input class="datePicker" data-date-format="yyyy-mm-dd" type="text" 
    placeholder="yyyy-mm-dd" data-ng-model="to" id="to" required> 
    <br/> 
    <label for="releaseNo">Release No.</label> 
    <input type="text" id="releaseNo" required> 
    <input class="btn btn-primary" type="submit" value="Add"> 
</div> 
</form> 

과 유사합니다. 목록의 첫 번째 제품에만 적용됩니다. 다른 제품의 경우 dateui 선택 도구가 튀어 나오지만 날짜는 선택할 수 없습니다.

Answer 1

문제는 datepicker ID가 중복된다는 것입니다. id를 전혀 사용하지 않거나 생성하지 않고이를 해결할 수 있습니다 (예 : $ index를 사용).

<form data-ng-submit="addRelease(b)"><div class="form-field-container"> 
<label for="from-{{$index}}">From</label> 
<input class="datePicker" data-date-format="yyyy-mm-dd" type="text" 
placeholder="yyyy-mm-dd" data-ng-model="from" id="from-{{$index}}" required> 
<br/> 
<label for="to-{{$index}}">To</label> 
<input class="datePicker" data-date-format="yyyy-mm-dd" type="text" 
placeholder="yyyy-mm-dd" data-ng-model="to" id="to-{{$index}}" required> 
<br/> 
<label for="releaseNo">Release No.</label> 
<input type="text" id="releaseNo" required> 
<input class="btn btn-primary" type="submit" value="Add"></div></form> 

Answer 2

ispn 및 ng-model 속성에 대한 고유 변수를 datepicker의 각 인스턴스에 제공해야합니다. 또한 각각에 대해 고유 ID를 제공하는 것이 가장 좋습니다. Angular가 ng-repeat 블록에서 제공하는 $ index 변수를 사용합니다.

참조 작업 plunker : http://plnkr.co/edit/HlD4pKJyamXGPM2UtL98?p=preview

마크 업 : 컨트롤러에서

<div ng-repeat="item in items"> 
    <input type="text" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened[$index]" min="minDate" max="'2025-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" /> 
    <button class="btn" ng-click="open($index)"><i class="icon-calendar"></i> 
    </button> 
</div> 

: 그것에 대해

$scope.opened = []; 
$scope.open = function(index) { 
    $timeout(function() { 
    $scope.opened[index] = true; 
    }); 
};