动态添加Angular UI Datepicker [英] Adding Angular UI Datepicker dynamically
问题描述
在我的项目中，我需要添加动态数量的日期戳记到页面。
我试图这样做（ Plunker ）：
In my project I need to add dynamic amount of datepickers to the page. I tried to do it this way (Plunker):
脚本：
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：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<form name="detailsForm" novalidate ng-submit="submitForm(detailsForm.$valid)">
<div ng-repeat="item in details" class="input-group">
<input ng-model="item.parameterValue" type="text" class="form-control" id="datePickerItem" datepicker-popup="shortDate"
is-open="opened" 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)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</form>
</div>
</body>
</html>
问题是当我尝试打开一个datepicker时，所有这些都打开（逻辑上，as他们共享相同的 $ scope.opened 变量）。此外，当我关闭它们并尝试再次打开它们时，没有任何反应。
The problem is that when I try to open one datepicker, all of them are opened (logically, as they share the same $scope.opened variable). Also when I close them and try to open them again, nothing happens.
有没有一个优雅的方法来实现这一点？
Is there a elegant way to achieve this?
谢谢。
推荐答案
所有的日期检查者都有 id =datePickerItem。
All of your datepickers have id="datePickerItem".
必须在HTML中是唯一的。尝试这样做：
The id attribute must be unique in html. Try this instead:
id="datePickerItem_{{$index}}"
这将向ID添加 ng-repeat 的当前索引，因此您可以相对确定你的id是独一无二的。这也应该可以防止所有的日期检查器同时打开。
This will add the ng-repeat's current index to the id, so you can be relatively certain your id's are unique. This should also prevent all the datepickers from opening at the same time.
此外，您使用的是一个相同的打开的变量为所有日期选择器。
Also, you're using one and the same opened variable for all datepickers.
尝试这样做：
<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>
And：
$scope.opened = [];
$scope.openDatePicker = function($event, index) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened[index] = true;
};
只需确保设置 $ scope.opened [index] 到 false ，以防您关闭datepicker。
Just make sure you set $scope.opened[index] to false, in case you close the datepicker.
这篇关于动态添加Angular UI Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
