我正在尝试使用AngularJS对ng-model执行不区分大小写的绑定到静态选择下拉列表.考虑select元素：
<select id="animal" ng-model="ctrl.animal">
<option value="">--- Select ---</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
如果我在Angular Controller中设置ctrl.animal =“Cat”,绑定工作正常.问题是,如果我设置ctrl.animal =“CAT”它不会绑定,因为字符串不同是由于套管差异.
我也尝试将’value’属性转换为所有大写但绑定仍然不起作用.在样本中：
<select id="animal" ng-model="ctrl.animal">
<option value="">--- Select ---</option>
<option value="CAT">Cat</option>
<option value="DOG">Dog</option>
</select>
有没有办法让AngularJS在绑定到选择列表时忽略大小写？或者,至少使用’value’属性中的文本进行绑定,而不是’option’元素标记中的文本.
这是一个JSFiddle
解决方法
不确定这是否是最佳方式,但您可以创建一个自定义格式化程序来处理模型以查看转换.
Demo.
angular
.module('app',[])
.directive('caseinsensitiveOptions',function() {
return {
restrict: 'A',require: ['ngModel','select'],link: function(scope,el,attrs,ctrls) {
var ngModel = ctrls[0];
ngModel.$formatters.push(function(value) {
var option = [].filter.call(el.children(),function(option) {
return option.value.toUpperCase() === value.toUpperCase()
})[0]; //find option using case insensitive search.
return option ? option.value : value
});
}
}
})
<select id="animal" caseinsensitive-options ng-model="ctrl.animal">
