AngularJS不区分大小写的绑定到静态选择下拉列表

发布时间：2020-12-17 17:26:40 所属栏目：安全来源：网络整理

导读：我正在尝试使用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 如果

我正在尝试使用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">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!