动态添加Angular UI Datepicker
Adding Angular UI Datepicker dynamically
在我的项目中,我需要向页面添加动态数量的日期拾取器。我试过这样做(普朗克):
脚本:
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>
问题是,当我试图打开一个日期选择器时,所有它们都被打开(逻辑上,因为它们共享相同的$scope.opened
变量)。另外,当我关闭它们并试图再次打开它们时,什么也没有发生。
是否有一种优雅的方式来实现这一点?
谢谢。
所有的日期选择器都有id="datePickerItem"
。
id
属性在html中必须唯一。试试这个:
id="datePickerItem_{{$index}}"
这将把ng-repeat
的当前索引添加到id中,因此您可以相对确定您的id是唯一的。这也可以防止所有的日期选择器在同一时间打开。
此外,您正在使用一个和相同的opened
变量为所有日期拾取器。
试试这个:
<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 = [];
$scope.openDatePicker = function($event, index) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened[index] = true;
};
只要确保你设置$scope.opened[index]
为false
,以防你关闭日期选择器
try this:
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
和html
ng-click="open($event, 'nameOfYourModel')"
为什么不在repeat object
上绑定opened
呢?
:
<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="item['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, item)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
和in控制器:
$scope.openDatePicker = function($event, item) {
$event.preventDefault();
$event.stopPropagation();
if(item.opened){
item.opened = !item.opened;
} else{
item.opened = true;
}
};
相关文章:
- TypeError:在Jquery ui datepicker中未定义datepicker_instActive
- jQuery UI DatePicker-禁用除每月第一天和第15天以外的所有日期
- 使用Angular.ui Datepicker没有显示日期
- Angular UI Bootstrap Datepicker动态日期(变量)
- 如何在jquery-ui-datepicker和moment.js使用的日期格式之间转换
- 自定义 Umbraco 仪表板中的 JQuery UI Datepicker 和 Angular JS
- 将jquery UI datepicker集成到React JS中
- setDate in jQuery UI DatePicker
- jquery UI Datepicker setDate 仅适用于 Google Chrome
- JQuery DatePicker UI 显示格式
- 有没有一种简单的方法可以将自定义类添加到jQuery-ui Datepicker的所有元素中
- jQuery ui Datepicker - global extend/override?
- Ruby on Rails:“找不到文件'jquery.ui.datepicker'”
- Jquery UI DatePicker,获取默认日期的关联输入文本
- jQuery Datepicker UI Tooltip
- 在jquery日期选择器上应用.ui-datepicker-trigger类
- 使用新选项扩展 jquery-ui-datepicker
- jQuery UI Datepicker:如何在页面加载时触发 onChangeMonthYear
- angular.ui DatePicker 如何设置日期格式
- jQuery UI 中的 datePicker 不起作用