Question

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

Answer 1

不确定这是否是最佳方式，但您可以创建一个自定义格式化程序来处理模型以查看转换。 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">

Answer 2

您可以将选项值转换为大写或小写，以便您知道它始终处于特定情况。

(function() {
  'use strict';

  angular
    .module('exampleApp', [])
    .controller('ExampleController', ExampleController);

  function ExampleController() {
    var vm = this;
    vm.dropDownValues = [{
      value: "Cat",
      name: "Cat"
    }, {
      value: "Dog",
      name: "Dog"
    }];
    vm.animal = "CAT";
    /*
    // probably easier to just select the first element
    vm.animal = vm.dropDownValues[0].value;
    */
  }

})();

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <select ng-model="vm.animal" ng-options="(animal.value | uppercase) as animal.name for animal in vm.dropDownValues">
  </select>
</body>

</html>

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

2 个答案: