Angularjs 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,所以我不得不稍微调整一下。

也许这有点混乱,但结果可以在没有特殊功能的情况下实现

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

这是因为当你得到unit.id时,它返回的是字符串而不是整数。javascript中的对象将其键存储为字符串。所以,唯一的方法就是通过报价来围绕4。

编辑

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="convertToInt(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

$scope.convertToInt = function(id){
    return parseInt(id, 10);
};

您还可以定义筛选器 number ,此筛选器将自动将字符串值解析为int:

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id|number as unit.text for unit in ctrl.unitsOptions"></select>


angular.module('filters').filter('number', [function() {
        return function(input) {
            return parseInt(input, 10);
        };
    }]);

只需添加Christophe的答案:实现和维护它的最简单方法是发出指令:

JS文件:

.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        //saves integer to model null as null
        return val == null ? null : parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        //return string for formatter and null as null
        return val == null ? null : '' + val ;
      });
    }
  };
});

Christophe的答案对“0”不正确,因为在“val?”测试中返回false。

可以使用ng值属性。这样地:

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

我认为其他解决方案对于简单地将值建立为整数来说过于复杂。我会使用:

<select ng-model="model.id">
    <option ng-value="{{ 0 }}">Zero</option>
    <option ng-value="{{ 1 }}">One</option>
    <option ng-value="{{ 2 }}">Two</option>
</select>

Angular正在查看您的 id 属性作为字符串,添加引号:

self.selectedUnitOrdinal = "4";

与tymeJV的答案非常相似,简单的解决方法是将默认选择编号转换为如下字符串:

self.selectedUnitOrdinal = valueThatCameFromServer.toString();

这样,您不必对数字进行硬编码,只需转换任何收到的值即可。这是一个简单的解决方案,没有任何过滤器或指令。

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

将unitsOptions中的id属性设置为数字

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

http://jsfiddle.net/htwc10nx/

虽然Mathew Berg提供的解决方案有效,但它可能会打破使用字符串值选择选项的其他选择。如果您试图编写一个通用指令来处理选择,这可能是一个问题(就像我所做的那样)。

一个很好的解决方法是检查值是否为数字(即使它是包含数字的字符串),然后只进行转换,如下所示:

angular.module('<module name>').filter('intToString', [function() {
        return function(key) {
            return (!isNaN(key)) ? parseInt(key) : key;
        };
    }]);

或作为控制器方法:

$scope.intToString = function(key) {
    return (!isNaN(key)) ? parseInt(key) : key;
};