Javascript 动态添加角度UI日期选择器

在我的项目中，我需要向页面添加动态数量的日期选择器。 我试着这样做（）：

脚本：

var app = angular.module('plunker', ['ui.bootstrap']);    
app.controller('MainCtrl', function($scope) {
  $scope.openDatePicker = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: "yy",
    startingDay: 1,
    format: "shortDate"
  };

  $scope.details = [{
    "parameterValue": "2015-08-12"
  }, {
    "parameterValue": "2015-08-12"
  }, {
    "parameterValue": "2015-08-12"
  }, {
    "parameterValue": "2015-08-12"
  }];
});

HTML:

问题是，当我尝试打开一个日期选择器时，所有的日期选择器都被打开（逻辑上，因为它们共享相同的

$scope.opened

变量）。此外，当我关闭它们并试图再次打开它们时，什么也没有发生

有没有一个优雅的方法来实现这一点

---

谢谢。

您所有的日期选择器都有

id=“datePickerItem”

id

属性在html中必须是唯一的。请尝试以下方法：

id="datePickerItem_{{$index}}"

<div ng-repeat="item in details" class="input-group">
    <input ng-model="item.parameterValue" type="text" class="form-control" 
        id="datePickerItem_{{$index}}" datepicker-popup="shortDate" 
        is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

这将把

ng repeat

的当前索引添加到id中，因此您可以相对确定您的id是唯一的。这也应该防止所有日期选择器同时打开

另外，对于所有日期选择器，您都使用了一个相同的

opened

变量

请尝试以下方法：

id="datePickerItem_{{$index}}"

<div ng-repeat="item in details" class="input-group">
    <input ng-model="item.parameterValue" type="text" class="form-control" 
        id="datePickerItem_{{$index}}" datepicker-popup="shortDate" 
        is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

---

只要确保将

$scope.opened[index]

设置为

false

，以防关闭日期选择器。

您的所有日期选择器都有

id=“datePickerItem”

id

属性在html中必须是唯一的。请尝试以下方法：

id="datePickerItem_{{$index}}"

<div ng-repeat="item in details" class="input-group">
    <input ng-model="item.parameterValue" type="text" class="form-control" 
        id="datePickerItem_{{$index}}" datepicker-popup="shortDate" 
        is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

这将把

ng repeat

的当前索引添加到id中，因此您可以相对确定您的id是唯一的。这也应该防止所有日期选择器同时打开

另外，对于所有日期选择器，您都使用了一个相同的

opened

变量

请尝试以下方法：

id="datePickerItem_{{$index}}"

<div ng-repeat="item in details" class="input-group">
    <input ng-model="item.parameterValue" type="text" class="form-control" 
        id="datePickerItem_{{$index}}" datepicker-popup="shortDate" 
        is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

只要确保将

$scope.opened[index]

设置为

false

，以防关闭日期选择器。

尝试以下操作：

$scope.open = function($event,opened) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope[opened] = true;
    };

在你的html中

ng-click="open($event, 'nameOfYourModel')"

试试这个：

$scope.open = function($event,opened) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope[opened] = true;
    };

在你的html中

ng-click="open($event, 'nameOfYourModel')"

---

为什么不在

重复对象

上绑定

打开的

比如：

---

为什么不在

重复对象

上绑定

打开的

比如：

---

你是对的，它们都有相同的id。我试图添加{{$index}}，但不幸的是，这没有什么区别。我想这是由“$scope.opened”变量引起的。@MartinSlezák：我在回答中又添加了一些。你是对的，它们都有相同的id。我试图添加{$index}，但不幸的是，这没有什么区别。我想这是由“$scope.opened”变量引起的。@MartinSlezák：我在回答中又加了一些