ng-options에서 ng-class를 사용하는 방법

ng-options에서 ng-class를 사용하는 방법

개인 객체 배열이 있습니다.

var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];

select를 ng-select와 함께 사용하고 있습니다.

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

적격한:false의 레코드를 빨간색으로 표시하고 싶습니다.그래서 문제는 어떻게 하면ng-classselect이표 를성 ?성 성??하지 option 안 돼요.ng-class select요소 자체입니다.

ngOptions 디렉티브가 처리된 후 해당 옵션을 적절한 클래스로 업데이트하는 디렉티브를 생성할 수 있습니다.

업데이트: 이전 코드에는 몇 가지 버그가 있었습니다.이 질문에 답한 후 조금 알게 되었습니다.이것은 1.2.2에서 리다이렉트된 플렁크입니다(1.0.X에서도 동작합니다).

다음은 업데이트된 코드(11월 30일 3:17)입니다.

app.directive('optionsClass', function ($parse) {
  return {
    require: 'select',
    link: function(scope, elem, attrs, ngSelect) {
      // get the source for the items array that populates the select.
      var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
      // use $parse to get a function from the options-class attribute
      // that you can use to evaluate later.
          getOptionsClass = $parse(attrs.optionsClass);

      scope.$watch(optionsSourceStr, function(items) {
        // when the options source changes loop through its items.
        angular.forEach(items, function(item, index) {
          // evaluate against the item to get a mapping object for
          // for your classes.
          var classes = getOptionsClass(item),
          // also get the option you're going to need. This can be found
          // by looking for the option with the appropriate index in the
          // value attribute.
              option = elem.find('option[value=' + index + ']');

          // now loop through the key/value pairs in the mapping object
          // and apply the classes that evaluated to be truthy.
          angular.forEach(classes, function(add, className) {
            if(add) {
              angular.element(option).addClass(className);
            }
          });
        });
      });
    }
  };
});

마크업에 사용하는 방법은 다음과 같습니다.

<select ng-model="foo" ng-options="x.name for x in items" 
        options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>

이 기능은 ng-class와 동일하게 동작합니다.단, 컬렉션 내의 항목별로 동작합니다.

에서는 "를 사용하는 에만 ng-class를 적용할 수 .ng-repeat"이것들"은 다음과 같습니다.

<select ng-model="Blah">
  <option ng-repeat="person in persons" ng-class="{red: person.Eligible}">
    {{person.Name}}
  </option>  
</select>

이것은 당신의 '적격자'에게 커스텀 클래스를 제공하지만, CSS는 여러 분야에서 일관되게 작동하지 않습니다.

플런커.

인정된 답변에 대해 코멘트를 하고 싶었지만, 평점이 부족하기 때문에 답변을 추가해야 합니다.오래된 질문인 것은 알지만, 최근 받아들여진 답변에 추가된 코멘트입니다.

angularjs 1.4.x의 경우 제안된 지시가 다시 작동하도록 조정되어야 한다.ngOptions의 변경으로 인해 옵션 값은 더 이상 인덱스가 아니기 때문에 행은

option = elem.find('option[value=' + index + ']');

더 이상 작동하지 않습니다.

플런커의 코드를 다음과 같이 변경하면

<select ng-model="foo" ng-options="x.id as x.name for x in items" 
        options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>

그 결과 옵션태그의 값은 다음과 같습니다.

value="number:x"x는 아이템오브젝트의 아이디입니다).

지시문을 로 변경합니다.

option = elem.find('option[value=\'number:' + item.id + '\']');

다시 작동시킬 수 있을 것 같아요

물론 일반적인 솔루션은 아닙니다. 아이디 '아이디? '아예'가 있어요.value="object:y"에서는 y는 의해 입니다만, 이 angularjs를 하면 angularjs가 됩니다.y항목에 매핑할 수 없습니다.

이를 통해 angularjs를 1.4.x로 업데이트한 후 코드를 다시 사용할 수 있기를 바랍니다.

저도 했어요.track byng-options. ,하만작작 , ,하 , , , , , , , , , , 。angularjs는 angularjs라고 해요?

지시는 한 가지 방법이지만, 저는 커스텀 필터를 사용했습니다.요소를 선택하는 방법을 알고 있다면 여기서는 문제 없습니다.문제는 선택 항목 내에서 현재 옵션 요소를 찾는 것이었습니다."포함" 선택기를 사용할 수도 있지만 옵션의 텍스트가 항목에 고유하지 않을 수 있습니다.값별로 옵션을 찾기 위해 스코프와 아이템 자체를 삽입했습니다.

<select ng-model="foo" ng-options="item.name|addClass:{eligible:item.eligible,className:'eligible',scope:this,item:item} for item in items"></select>

js:

var app = angular.module('test', []);

app.filter('addClass', function() {
  return function(text, opt) {
    var i;
    $.each(opt.scope.items,function(index,item) {
      if (item.id === opt.item.id) {
        i = index;
        return false;
      }
    });
    var elem = angular.element("select > option[value='" + i + "']");
    var classTail = opt.className;
    if (opt.eligible) {
      elem.addClass('is-' + classTail);
      elem.removeClass('not-' + classTail);
    } else {
      elem.addClass('not-' + classTail);
      elem.removeClass('is-' + classTail);
    }
    return text;
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'foo',id: 'x1',eligible: true},
    { name: 'bar',id: 'x2',eligible: false}, 
    { name: 'test',id: 'x3',eligible: true}
  ];
 });

여기서 작동되는 것을 볼 수 있습니다.

디렉티브가 을 찾았습니다.track by:

<select ng-model="foo" ng-options="x.name for x in items track by x.eligible"></select>

이제 각 옵션은 x.적격 값을 받습니다.CSS에서는 값이 = true인 옵션을 스타일링할 수 있습니다(true는 문자열이어야 합니다).CSS:

option[value="true"]{
    color: red;
}

뿐만 할 수 " "를 사용할 수 .disable when:

<select 
    ng-model="Blah"
    ng-options="person.Name disable when !person.Eligible for person in persons">
</select>

그런 다음 CSS를 사용하여 비활성화된 옵션의 색상을 설정할 수 있습니다.

평판상 코멘트로 쓸 수 없지만, Angular 1.4.8에 대응하도록 플런커를 업데이트했습니다.Ben Lesh가 원래 답변을 해주신 덕분에 많은 도움이 되었습니다.차이점은 새로운 Angular가 다음과 같은 옵션을 생성한다는 것입니다.

<option class="is-eligible" label="foo" value="object:1">foo</option>

그래서 암호는

option = elem.find('option[value=' + index + ']');

선택지를 찾을 수 없을 거예요변경사항은 ngOptions를 해석하여 라벨에 사용된 항목의 필드를 결정하고 값을 기반으로 옵션을 찾습니다.참조:

http://plnkr.co/edit/MMZfuNZyouaNGulfJn41

파티에 조금 늦은 건 알지만, 순수한 CSS로 이 문제를 해결하고 싶은 분들을 위해 지시문을 사용하지 않고 다음과 같은 css 클래스를 만들 수 있습니다.

select.blueSelect option[value="false"]{
    color:#01aac7;
}

이 css 규칙은 다음과 같습니다. "blue Select" 클래스가 있는 모든 "select" 안에 태그 이름이 'option'인 값이 =인 모든 요소를 찾고 텍스트 색상을 #01aac7;(파란색 음영)으로 만듭니다.

이 경우 HTML은 다음과 같습니다.

<select class="form-control blueSelect" name="persons" id="persons1"
        ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

ng-options 내부의 추적은 옵션을 추적하는 기준 또는 각 옵션의 "값" 필드를 유지하는 것입니다.프로젝트의 요구에 따라서는, 필요에 따라서 조작을 실시할 필요가 있는 경우가 있습니다.

그러나 "적용 대상" 필드에 동일한 값을 가진 옵션이 여러 개 있는 경우 이 방법은 제대로 작동하지 않습니다.따라서 이 작업을 수행하기 위해 추적할 복합식을 만듭니다. 그러면 각 옵션에서 고유한 값을 추적할 수 있습니다.이 경우 [Name]필드와 [Qualific]필드를 모두 조합합니다.

이제 html은 다음과 같습니다.

<select class="form-control blueSelect" name="persons" id="persons2"
        ng-options="person as person.name for person in $ctrl.persons track by (person.name + person.Eligible)"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

그리고 우리의 css:

select.blueSelect option[value*="False"]{
    color:#01aac7;
}

값 옆의 *는 옵션 요소의 값 필드 어딘가에 있는 "False"라는 단어를 찾는 것을 의미하는 정규 표현입니다.

빠른 편집 ng-time 표현식의 "disable when(사용 안 함 시간)"을 사용하여 적격 = False(False) 옵션을 비활성화하도록 선택할 수도 있습니다. 예를 들어 다음과 같습니다.

라벨. 사용 안 함 무효로 하다 위해서 가치 에 배열 까지 추적하다. 트레이스

당신의 케이스에서의 사용법은 당신이 알 수 있도록 남겨 두겠습니다;-)

이것은 간단한 css 수정에 도움이 됩니다.좀 더 복잡한 작업에는 지시문이나 다른 방법이 필요할 수 있습니다.크롬으로 테스트 완료.

이게 누군가에게 도움이 됐으면 좋겠어요. :-)

지시문이나 필터를 추가하는 것보다 쉬운 다른 해결 방법을 찾았습니다. 즉, 스타일을 적용하는 포커스 이벤트에 대한 핸들러를 추가하는 것입니다.

angular.element('select.styled').focus( function() {
  angular.element(this).find('option').addClass('myStyle');
});

언급URL : https://stackoverflow.com/questions/15264051/how-to-use-ng-class-in-select-with-ng-options