在 angularjs 中填充下拉选择
populate dropdown selects in angularjs
我正在开发我的应用程序,我希望下拉菜单的值自动与日期选择器中所选日期的值相同。我正在使用 angularjs,但我找不到足够的资源来专门回答我的问题……谢谢
这里是一些代码。我的整个代码都在 plunker
script type="text/ng-template" id="custom-datepicker.html">
<div class="form-inline enhanced-datepicker">
<label>
<input
type="text"
id="{{id}}"
name="{{name}}"
ng-model="ngModel"
datepicker-popup="{{popup}}"
datepicker-options="{{options}}"
date-disabled="{{dateDisabled}}"
min="{{min}}"
max="{{max}}"
open="opened"
ng-pattern="/^(?:[1-9]|1\d|2\d|3[0-1]) (?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) (?:1|2)(?:\d{3})$/gim"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</label>
</div>
</script>
<script>
angular
.module('App',['ui.bootstrap'])
.directive('customDatepicker',function($compile,$timeout){
return {
replace:true,
templateUrl:'custom-datepicker.html',
scope: {
ngModel: '=',
dateOptions: '@',
dateDisabled: '@',
opened: '=',
min: '@',
max: '@',
popup: '@',
options: '@',
name: '@',
id: '@'
},
link: function($scope, $element, $attrs, $controller){
}
};
})
这里是 plunker link: http://plnkr.co/edit/4XRjszIATgvUVrofgRFI?p=preview
当您 select 日期调用函数更新日期字段时,您是否考虑过使用 ng-change?
据我所知,您的 plunker 现在可以正常工作,但不正常,因为例如在月份下拉列表中,将添加一个新值,因此您将有两个 Dec 值,并且无法点击日期下拉列表.问题是,您是否需要它们可点击,如果需要,下拉菜单中的日期选择器日期更新是否应该更改?
我会尝试将选择绑定到一个范围变量,该变量将在日期选择器更改时解析为正确的日、月和年值。
我想在你的 plunker 中向你展示,但是 html 文件中的所有内容,抱歉...
我正在开发我的应用程序,我希望下拉菜单的值自动与日期选择器中所选日期的值相同。我正在使用 angularjs,但我找不到足够的资源来专门回答我的问题……谢谢
这里是一些代码。我的整个代码都在 plunker
script type="text/ng-template" id="custom-datepicker.html">
<div class="form-inline enhanced-datepicker">
<label>
<input
type="text"
id="{{id}}"
name="{{name}}"
ng-model="ngModel"
datepicker-popup="{{popup}}"
datepicker-options="{{options}}"
date-disabled="{{dateDisabled}}"
min="{{min}}"
max="{{max}}"
open="opened"
ng-pattern="/^(?:[1-9]|1\d|2\d|3[0-1]) (?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) (?:1|2)(?:\d{3})$/gim"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</label>
</div>
</script>
<script>
angular
.module('App',['ui.bootstrap'])
.directive('customDatepicker',function($compile,$timeout){
return {
replace:true,
templateUrl:'custom-datepicker.html',
scope: {
ngModel: '=',
dateOptions: '@',
dateDisabled: '@',
opened: '=',
min: '@',
max: '@',
popup: '@',
options: '@',
name: '@',
id: '@'
},
link: function($scope, $element, $attrs, $controller){
}
};
})
这里是 plunker link: http://plnkr.co/edit/4XRjszIATgvUVrofgRFI?p=preview
当您 select 日期调用函数更新日期字段时,您是否考虑过使用 ng-change?
据我所知,您的 plunker 现在可以正常工作,但不正常,因为例如在月份下拉列表中,将添加一个新值,因此您将有两个 Dec 值,并且无法点击日期下拉列表.问题是,您是否需要它们可点击,如果需要,下拉菜单中的日期选择器日期更新是否应该更改? 我会尝试将选择绑定到一个范围变量,该变量将在日期选择器更改时解析为正确的日、月和年值。 我想在你的 plunker 中向你展示,但是 html 文件中的所有内容,抱歉...