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

问题描述

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

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

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

<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">发布号</label><input type="text" id="releaseNo" required><input class="btn btn-primary" type="submit" value="Add">

</表单>

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

解决方案

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

参见工作 plunker:http://plnkr.co/edit/HlD4pKJyamXGPM2UtL98?p=preview

标记:

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

在您的控制器中:

$scope.opened = [];$scope.open = 函数(索引){$超时(功能(){$scope.opened[index] = true;});};

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.

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.

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>

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.

解决方案

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.

See working plunker: http://plnkr.co/edit/HlD4pKJyamXGPM2UtL98?p=preview

Markup:

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

In your controller:

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

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