Средство выбора даты Angular UI в ng-repeat работает только для первого блока

Когда я использую средство выбора даты angular ui в блоке ng-repeat, средство выбора даты работает правильно только для первого блока. Для остальных повторяющихся блоков, несмотря на отображение календаря, дату выбрать нельзя.

Может кто-нибудь, пожалуйста, скажите мне, как я могу заставить его работать? Я попытался добавить к имени модели $parent, но это не помогло.

У меня есть список продуктов, и для каждого продукта есть новая форма выпуска с двумя полями даты. Я использую 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>

Работает только для товара, который стоит первым в списке. Для других продуктов, хотя всплывает окно выбора даты, мы не можем выбрать дату.


angular-ui jquery-ui-datepicker
person Community    schedule 31.12.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вам необходимо предоставить каждому экземпляру средства выбора даты уникальную переменную для атрибутов is-open и ng-model. Также лучше предоставить уникальный идентификатор для каждого. Я использую переменную $index, которую Angular предоставляет в блоках ng-repeat.

См. работающий плункер: 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;
  });
};
person Dylan    schedule 05.09.2015

arrow_upward
4
arrow_downward

Проблема в том, что идентификаторы datepicker дублируются. Вы можете решить эту проблему, избегая использования идентификаторов вообще или генерируя их, например, используя $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>
person user2029159    schedule 31.01.2013
comment
Спасибо за это, у меня была такая же проблема. Все еще не могу получить кнопку рядом с полем ввода, чтобы открыть средство выбора даты. Я пытался использовать массив с $index, но это не дало результата. Любые идеи? plnkr.co/edit/VM9wr9iIJUQW3UJYFW71?p=preview - person Craig Morgan; 21.10.2013
comment
Собственно, только что исправил! См. планк выше. - person Craig Morgan; 21.10.2013