jquery-ui-datepicker - ng-repeat 中的 Angular UI 日期选择器仅适用于第一个 block

Question

当我在 ng-repeat block 中使用 angular ui datepicker 时，datepicker 仅适用于第一个 block 。对于剩余的重复 block ，虽然显示了日历，但无法选择日期。

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

我有一个产品列表，每个产品都有一个新的发布表单，其中包含两个日期字段。我正在使用 ng-repeat 来显示产品，并在单击添加发布时，会填充该产品 block 的发布表单。形式类似于

<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>

它仅适用于列表中的第一个产品。对于其他产品，虽然会弹出日期选择器，但我们无法选择日期。

Answer 1

您需要为日期选择器的每个实例提供一个唯一变量，用于 is-open 和 ng-model 属性。最好为每个人提供一个唯一的 ID。我使用了 Angular 在 ng-repeat block 中提供的 $index 变量。

查看工作人员: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>

在您的 Controller 中:

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