在 Angular 中动态设置 ngModelOptions

2024-01-31

我有以下片段:

<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)。有什么方法可以在时区更改时强制刷新字段吗?

Edit

Fiddle: https://jsfiddle.net/10nfqow9/ https://jsfiddle.net/10nfqow9/


创建另一个具有高优先级(高于 ng-model /ng-model-option)的指令(属性类型),用于监视选项对象的更改并触发重新编译。对于缺乏细节,我深表歉意,我正在打电话:)

编辑: 看起来有一个指令叫做kcd 重新编译 http://kentcdodds.com/kcd-angular/#/kcd-recompile这正是我所描述的。这是一个工作plnkr https://plnkr.co/edit/C9t1vn?p=preview,还有一些额外的好处可以考虑美国时区的 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>

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'
      }
    ];
  }]
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 中动态设置 ngModelOptions 的相关文章

随机推荐