我试图使用ng选项与< select>以将数值整数值绑定到相应选项的列表。在我的控制器,我有这样的东西:
@H_404_1@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:
@H_404_1@<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(最后一部分)。
原文链接:https://www.f2er.com/angularjs/146358.html您可以创建一个convert-to-number指令,并将其应用到select标记:
JS:
@H_404_1@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:
@H_404_1@<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,所以我不得不调整一点。