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

我试图使用AngularJS将ng模型的大小写不敏感绑定到动态选择下拉列表。AngularJS不区分大小写绑定到动态选择下拉列表，而无需将ng-bind值更改为大写或小写

通过从堆在流动其他各种relavent答案去，我已经提出了类似下面的观点，这里CASEINSENSITIVE选项是我想出了参考以下解决方案

AngularJS case-insensitive binding to a static select drop-down的指令

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。那现在不会发生。当我们有静态下拉时，上述解决方案可以很好地工作。被认为是

事情之一是，所述选择是一个div其中NG-重复内部如下所示

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

和用于选择DC.name NG-模型从上述阵列DC的。

来源

2017-01-07 nparvez

为什么你会不只是消毒数据，而不是试图以武力对付它的框架？在尝试将数据分配给模型之前，将数据转换为控制器中正确的大小写不是更有意义吗？ – Claies

我明白，但要求是不改变数据..任何其他方式来做到这一点？ – nparvez

我认为修复数据模型以使其可用于控制器与“更改数据”不同，除非最终由于某种原因而导致模型更改持续不变......您始终可以克隆数据并使用该克隆对原始信息没有任何影响，但仍然比尝试这样做要好。 – Claies

检查这个网址绑定基于不区分大小写的值

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) { 
});

来源

2017-01-07 08:51:24

感谢您的输入suhas，但上面的解决方案将在下拉列表上将视图上的过滤器应用于大写字母，但我需要某些可以进行不区分大小写的比较而不需要对这些值进行调整。上述解决方案只会改变视图中的情况 – nparvez

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

回答

相关问题