Angularjs ng-options 使用模型编号不选择初始值 [英] Angularjs ng-options using number for model does not select initial value

问题描述

我正在尝试使用带有 的 ng-options 来将数字整数值绑定到相应选项的列表.在我的控制器中，我有这样的东西:

myApp.controller('MyCtrl', function() {var self = this;var unitOptionsFromServer = {2:毫安"，3:A"，4:毫伏"，5:V"，6:W"，7:千瓦"};self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {返回 { id: key, text: unitOptionsFromServer[key] };});self.selectedUnitOrdinal = 4;//假设这个值来自服务器.});

HTML:

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

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

选择选项被初始化为空值，而不是本例中预期的mV".如果您选择不同的选项，则绑定似乎可以正常工作 -- selectedUnitOrdinal 正确更新.

我注意到，如果您将初始模型值设置为字符串而不是数字，则初始选择有效(请参阅小提琴中的 #3).

我真的希望 ng-options 能够很好地处理数字选项值.我怎样才能优雅地实现这一目标?

解决方案

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

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

JS:

module.directive('convertToNumber', function() {返回 {要求:'ngModel'，链接:功能(范围，元素，属性，ngModel){ngModel.$parsers.push(function(val) {返回值 != null ?parseInt(val, 10) : null;});ngModel.$formatters.push(function(val) {返回值 != null ?'' + val:空；});}};});

HTML:

<option value="0">零</option><option value="1">一个</option><option value="2">两个</option></选择>

注意:我发现文档中的指令不能处理空值，所以我不得不稍微调整一下.

I'm trying to use ng-options with a <select> to bind a numeric integer value to a list of corresponding options. In my controller, I have something like this:

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>

And here's a jsFiddle demonstrating the problem, and some other approaches I've taken but am not happy with.

The select option is being initialized with an empty value, instead of "mV" as expected in this example. The binding seems to work fine if you select a different option -- selectedUnitOrdinal updates properly.

I've noticed that if you set the initial model value to a string instead of a number, then the initial selection works (see #3 in the fiddle).

I really would like ng-options to play nice with numeric option values. How can I achieve this elegantly?

解决方案

Angular's documentation for the ng-select directive explains how to solve this problem. See https://code.angularjs.org/1.4.7/docs/api/ng/directive/select (last section).

You can create a convert-to-number directive and apply it to your select tag:

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>

Note: I found the directive from the doc does not handle nulls so I had to tweak it a little.

这篇关于Angularjs ng-options 使用模型编号不选择初始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！