AngularJS 고정 선택 드롭 다운에 대소 문자 구분 안 함

AngularJS를 사용하여 정적 선택 드롭 다운에 ng 모델의 대/소문자를 구분하지 않고 바인드를 수행하려고합니다. 선택 요소를 고려AngularJS 고정 선택 드롭 다운에 대소 문자 구분 안 함

<select id="animal" ng-model="ctrl.animal"> 
    <option value="">--- Select ---</option> 
    <option value="Cat">Cat</option> 
    <option value="Dog">Dog</option> 
</select>

내 각도 컨트롤러 바인딩 작품 벌금 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가 대소 문자를 무시할 수있는 방법이 있습니까? 또는 최소한 'option' 요소 태그에있는 태그 대신 바인딩에 'value'속성의 텍스트를 사용하십시오.

다음은 항상 특정시 더 알 수 있도록 JSFiddle

출처

2016-07-13 Tony Rush

선택의 첫 번째 옵션을 선택 하시겠습니까? – developer033

아니요, 실제 드롭 다운에는 20 개가 넘는 옵션이 있습니다. 외부 리소스에서 모델 값을 얻고 있으므로 +20 옵션 중 하나 일 수 있습니다. 이 값은 항상 대문자로 주어 지지만 실제로 렌더링 된 HTML을 볼 때 대문자를 모두보고 싶지는 않습니다. –

그래서이 '값'을 가진 컬렉션이 있고 ngOptions를 사용하고 있습니까? – developer033

이 최적의 방법입니다,하지만 당신은 convertion을 볼 수 모델을 처리 할 사용자 정의 포매터를 만들 수 있는지 확실하지. 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">

출처

2016-07-13 07:03:53

나는 이것을 매우 좋아한다! 나는 무엇을 할거야? 나는 더 많은 시간을 줄 것이고, 다른 어떤 것이 더 단순 해지면 이것을 대답으로 표시 할 것입니다. 에 chiming 주셔서 감사합니다! –

당신은 대문자 또는 소문자 할 수있는 옵션 값을 변환 할 수 있습니다.

(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>

출처

2016-07-13 07:02:10 ScottL

답장을 보내 주셔서 감사합니다. 불행히도 ng-options을 도입하지 않고 정적 HTML을 유지하려고합니다. 나는 Yury가 맞춤형 포매터를 도입함으로써 그것을 가지고 있다고 생각한다. –

AngularJS 고정 선택 드롭 다운에 대소 문자 구분 안 함

답변

관련 문제