3

ng-repeat ブロック内で angular ui datepicker を使用している場合、datepicker は最初のブロックに対してのみ正しく機能します。残りの繰り返しブロックについては、カレンダーは表示されますが、日付は選択できません。

誰かがどうすればそれを機能させることができるか教えてもらえますか? モデル名に $parent を追加しようとしましたが、役に立ちませんでした。

製品のリストがあり、製品ごとに 2 つの日付フィールドを持つ新しいリリース フォームがあります。製品を表示するために 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>

リストの最初にある製品に対してのみ機能します。他の製品の場合、dateui ピッカーがポップアップしますが、日付を選択できません。

4

2 に答える 2

5

datepicker の各インスタンスに、is-open および ng-model 属性の一意の変数を指定する必要があります。また、それぞれに一意の ID を指定することをお勧めします。Angular が ng-repeat ブロックで提供する $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>

コントローラーで:

$scope.opened = [];
$scope.open = function(index) {
  $timeout(function() {
    $scope.opened[index] = true;
  });
};
于 2015-09-05T22:26:44.523 に答える