使用数字作为模型的AngularJS ng-options不选择初始值

一尘不染

使用数字作为模型的AngularJS ng-options不选择初始值

angularjs

我正在尝试将ng-options与一起使用，<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-options与数字选项值一起玩。我怎样才能优雅地做到这一点？

阅读 194

2020-07-04

共1个答案

一尘不染

Angular的ng- select指令文档说明了如何解决此问题。请参阅 https://code.angularjs.org/1.4.7/docs/api/ng/directive/select（最后一部分）。

您可以创建一个convert-to-number指令并将其应用于您的选择标记：

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>

注意：我发现文档中的指令不能处理空值，因此我不得不对其进行一些调整。

2020-07-04