在Angular中动态设置ngModelOptions [英] Dynamically Setting ngModelOptions in Angular
问题描述
我有以下代码段:
<input type="date" ng-model="arrival" ng-model-options="{timezone: 'PST'}" />
<input type="time" ng-model="arrival" ng-model-options="{timezone: 'PST'}" />
{{arrival}}
这正常工作(日期以从PST转换的UTC时间显示).我现在正在尝试使"PST"选项动态化:
<select ng-model="timezone>
<option value="PST">PST</option>
<option value="EST">EST</option>
</select>
<input type="date" ng-model="arrival" ng-model-options="{timezone: timezone}" />
<input type="time" ng-model="arrival" ng-model-options="{timezone: timezone}" />
{{arrival}}
但是,更改时区永远不会更新到达时间(似乎绑定不适用于nd-model-options
).有什么办法可以在更改时区时强制字段刷新?
修改
提琴: https://jsfiddle.net/10nfqow9/
创建另一个具有较高优先级(高于ng-model/ng-model-option的优先级)的指令(属性类型),该指令监视options对象的更改和触发器重新编译.由于缺乏细节,我很抱歉,我正在打电话:)
看起来有一个名为 kcd-recompile 的指令,它完全符合我的描述.这是一个有效的 plnkr ,其中还有一些其他优点,可用于考虑美国时区的DST.>
HTML:
<div kcd-recompile="data.timezone">
<div>
<select ng-model="data.timezone" ng-options="x.offset as x.name for x in timezones">
</select>
</div>
<div>
<input type="date" ng-model="data.arrival" ng-model-options="{timezone: data.timezone}" />
</div>
<div>
<input type="time" ng-model="data.arrival" ng-model-options="{timezone: data.timezone}" />
</div>
</div>
和JS:
Date.prototype.stdTimezoneOffset = function() {
var jan = new Date(this.getFullYear(), 0, 1);
var jul = new Date(this.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
Date.prototype.dst = function() {
return this.getTimezoneOffset() < this.stdTimezoneOffset();
}
angular.module('DemoApp', ['kcd.directives']);
angular.module('DemoApp')
.controller('DemoCtrl', ['$scope', function($scope) {
var now = new Date(),
isDst = now.dst();
$scope.data ={
arrival: now,
timezone: null
};
$scope.timezones = [
{
name: 'PST',
offset: isDst ? '-0700' : '-0800'
},
{
name: 'EST',
offset: isDst ? '-0400' : '-0500'
}
];
}]
);
I've got the following snippet:
<input type="date" ng-model="arrival" ng-model-options="{timezone: 'PST'}" />
<input type="time" ng-model="arrival" ng-model-options="{timezone: 'PST'}" />
{{arrival}}
That works properly (the date is displayed in UTC time converted from PST). I'm now trying to make the 'PST' option dynamic:
<select ng-model="timezone>
<option value="PST">PST</option>
<option value="EST">EST</option>
</select>
<input type="date" ng-model="arrival" ng-model-options="{timezone: timezone}" />
<input type="time" ng-model="arrival" ng-model-options="{timezone: timezone}" />
{{arrival}}
However, changing the timezone never update the arrival (it appears that binding doesn't work with nd-model-options
). Any way I can force the fields to refresh when the timezone is changed?
Edit
Fiddle: https://jsfiddle.net/10nfqow9/
Create another directive (attribute type) with a high priority (higher than ng-model /ng-model-option's) that watches the options object for changes and triggers a recompile. My apologies for lack of specifics, I'm on a phone :)
EDIT: Looks like there's a directive called kcd-recompile that does exactly what I described. Here's a working plnkr, with some additional goodies for factoring in DST for american timezones.
HTML:
<div kcd-recompile="data.timezone">
<div>
<select ng-model="data.timezone" ng-options="x.offset as x.name for x in timezones">
</select>
</div>
<div>
<input type="date" ng-model="data.arrival" ng-model-options="{timezone: data.timezone}" />
</div>
<div>
<input type="time" ng-model="data.arrival" ng-model-options="{timezone: data.timezone}" />
</div>
</div>
And JS:
Date.prototype.stdTimezoneOffset = function() {
var jan = new Date(this.getFullYear(), 0, 1);
var jul = new Date(this.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
Date.prototype.dst = function() {
return this.getTimezoneOffset() < this.stdTimezoneOffset();
}
angular.module('DemoApp', ['kcd.directives']);
angular.module('DemoApp')
.controller('DemoCtrl', ['$scope', function($scope) {
var now = new Date(),
isDst = now.dst();
$scope.data ={
arrival: now,
timezone: null
};
$scope.timezones = [
{
name: 'PST',
offset: isDst ? '-0700' : '-0800'
},
{
name: 'EST',
offset: isDst ? '-0400' : '-0500'
}
];
}]
);
这篇关于在Angular中动态设置ngModelOptions的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!