ng-repeat中的Angular UI datepicker仅适用于第一个块 [英] Angular UI datepicker in ng-repeat works only for first block

问题描述

当我在ng-repeat块中使用angular ui datepicker时，datepicker仅适用于第一个块.对于其余的重复块，尽管显示了日历，但无法选择日期.

When I am using the angular ui datepicker within an ng-repeat block, the datepicker works correctly only for the first block. For the remaining repeated blocks, although the calender is displayed, a date cannot be selected.

有人可以告诉我如何使它工作吗?我试图用$ parent附加模型名称，但这没有帮助.

Can someone please tell me how I could get it working? I tried to append the model name with a $parent but that didnt help.

我有一个产品列表，每个产品都有一个新的发行表格，其中有两个日期字段.我正在使用ng-repeat来显示产品，然后单击添加发布"，将填充该产品模块的发布表格.形式类似于

I have a list of products and for each product there is a new release form which has two date fields. I am using ng-repeat to display the products and on clicking add a release, a release form for that product block is populated. The form is similar to

<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选择器，但我们无法选择日期.

It works only for the product which is first in the list. For the other products although the dateui picker pops up but we cannot select a date.

推荐答案

您需要为datepicker的每个实例提供is-open和ng-model属性的唯一变量.最好也为每个提供唯一的ID.我利用了Angular在ng-repeat块中提供的$ index变量.

You need to supply each instance of the datepicker with a unique variable for the is-open and ng-model attributes. It's also best to provide a unique id for each. I make use of the $index variable that Angular provides in ng-repeat blocks.

查看工作中的监听器: http://plnkr.co/edit/HlD4pKJyamXGPM2UtL98?p=preview

See working 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;
  });
};

这篇关于ng-repeat中的Angular UI datepicker仅适用于第一个块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！