3

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

有人可以告诉我如何让它工作吗？我试图用 $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>

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

4

2 回答 2

5

您需要为日期选择器的每个实例提供 is-open 和 ng-model 属性的唯一变量。最好为每个人提供一个唯一的 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;
  });
};
于 2015-09-05T22:26:44.523 回答
4

问题是 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>
于 2013-01-31T13:09:12.843 回答