ngClass에서 동적 값을 사용하는 방법

ngClass에서 동적 값을 사용하는 방법

스코프 변수와 같은 클래스 이름을 적용하려고 합니다.

예를 들어 다음과 같습니다.

<div ng-class="{item.name : item.name}">

그 가치가item.name클래스에 추가됩니다.하지만 이건 아무 소용이 없는 것 같아.어떻게 하면 좋을지 제안해 주시겠어요?

감사합니다!

편집:

이것은 실제로 선택 항목 내에서 ng-options를 사용하여 수행됩니다.예를 들어 다음과 같습니다.

<select ng-options="c.code as c.name for c in countries"></select>

이제 다음 값을 가진 클래스 이름을 적용하고 싶습니다.c.code

다음과 같은 지시사항을 찾았습니다. 효과가 있는 것 같습니다만, 값의 보간에는 효과가 없습니다.

angular.module('directives.app').directive('optionsClass', ['$parse', function ($parse) {
  'use strict';

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

}]);

안 하는 것보다는 차라리 낫지.

<div ng-class="{'{{item.name}}' : item.condition}">

네.'그리고.{{classname을 클릭합니다.

저는 각도 1.5.5에 있지만, 이 솔루션들 중 어느 것도 제게는 효과가 없었습니다.

어레이 구문과 맵 구문을 동시에 사용할 수 있습니다.단, 이 구문은 마지막 예에서만 볼 수 있습니다.

<div ng-class="[item.name, {'other-name' : item.condition}]">

변수를 사용하는 것만으로 충분합니다.

<div ng-class="item.name" />

이는 공식 문서에도 설명되어 있습니다.

콘셉트를 놓친 것 같아요.

조건부 css 클래스는 다음과 같습니다.

<div ng-class="{'<css_class_name>': <bool_condition>}">

그리고 난 네가 원하지 않는다고 생각해:

<div ng-class="{'true': true}">

다음 항목을 사용할 수 있습니다.

<div ng-class="item.name"></div>

Angularjs 조건이 있는 클래스 적용:

<div ng-class="{true:'class1',false:'class2'}[condition]" >

이것은 다음과 같은 경우에 도움이 됩니다.

HTML:

<div ng-class="getCssClass()"></div>

JS:

$scope.getCssClass = function () {
    return { item.name: item.name };
};

언급URL : https://stackoverflow.com/questions/24563001/how-to-use-a-dynamic-value-with-ngclass