使用型号的Angularjs ng-options不会选择初始值

发布时间：2020-12-17 08:57:28 所属栏目：安全来源：网络整理

导读：我试图使用ng选项与 select以将数值整数值绑定到相应选项的列表。在我的控制器，我有这样的东西： myApp.controller('MyCtrl',function() { var self = this; var unitOptionsFromServer = { 2: "mA",3: "A",4: "mV",5: "V",6: "W",7: "kW" }; self.unitsOpt

我试图使用ng选项与< select>以将数值整数值绑定到相应选项的列表。在我的控制器，我有这样的东西：

myApp.controller('MyCtrl',function() {
    var self = this;

    var unitOptionsFromServer = {
        2: "mA",3: "A",4: "mV",5: "V",6: "W",7: "kW"
    };

    self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
        return { id: key,text: unitOptionsFromServer[key] };
    });

    self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});

HTML：

<div ng-controller="MyCtrl as ctrl">
    <div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
    <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>

这里有一个jsFiddle演示了这个问题，以及一些其他的方法，我已经采取，但不满意。

正在使用空值初始化选择选项，而不是本示例中预期的“mV”。如果选择不同的选项 – selectedUnitOrdinal更新正确，绑定似乎工作正常。

我注意到，如果你设置初始模型值为一个字符串而不是一个数字，那么初始选择工作(见#3在小提琴)。

我真的想让ng选项玩数字选项值。我该如何优雅地实现？

Angular的ng-select指令文档解释了如何解决这个问题。见 https://code.angularjs.org/1.4.7/docs/api/ng/directive/select(最后一部分)。

您可以创建一个convert-to-number指令，并将其应用到select标记：

JS：

module.directive('convertToNumber',function() {
  return {
    require: 'ngModel',link: function(scope,element,attrs,ngModel) {
      ngModel.$parsers.push(function(val) {
        return val != null ? parseInt(val,10) : null;
      });
      ngModel.$formatters.push(function(val) {
        return val != null ? '' + val : null;
      });
    }
  };
});

HTML：

<select ng-model="model.id" convert-to-number>
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

注意：我发现从doc的指令不处理null，所以我不得不调整一点。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!