AngularJS不区分大小写的绑定到动态选择下拉列表，而不将ng-bind值更改为小写或大写

Question

我正在尝试使用AngularJS对动态选择下拉列表执行ng模型的不区分大小写的绑定。

通过遍历堆栈溢出的各种其他相关答案，我在视图上提出了以下内容，其中caseinsensitive-options是我提出了以下解决方案的指令

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

HTML：

<select id="dcName" caseinsensitive-options="" ng-model="DC.name" class="form-control">
  <option value="">--- Please Select ---</option>
  <option ng-repeat="dataCenter in inventoryDataCenters" value="{{dataCenter}}">{{dataCenter}}</option>
</select>

js指令代码：

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];
            return option ? option.value : value
          });

        }
      }
    });

预期的结果是

当我为$ scope.inventoryDataCenters = [“ TEST1”，“ test2”，teST3]传递类似内容时； DC.name的ng-model的值为TesT1。

下拉列表应通过不区分大小写的绑定显示TEST1。 现在没有发生。 当我们有静态下拉列表时，上述解决方案非常有效。

需要考虑的是，select在ng-repeat的div内，如下所示

ng-repeat="DC in workflowData.project_data.service_info.variables.service_data['data-center']" 

选择DC.name的ng-model是从上面的数组DC派生的。

Answer 1

根据不区分大小写的值检查此URL以进行绑定

https://jsfiddle.net/dwd2du17/6/

 <div ng-app="module" ng-controller="controller as ctrl">
 <select id="animal" ng-model="ctrl.animal">
  <option value="">--- Select ---</option>
  <option value="CaT">Cat</option>
  <option value="DOg">Dog</option>
 </select>
 {{ctrl.animal}}
 </div>


 var appForm = angular.module('module', [])
 .controller('controller', function($scope) {
 });