어떻게이 같은 값으로 또 하나의 클래스를 바인딩 할

Question

하나 개의 값에 또 하나의 클래스를 바인딩 NG-클래스를 사용하는 ? (코드가 작동하지 않습니다)

ng-class="{[first, second, third]: isTrue}" 

Answer 1

값이 true 일 때 작은 따옴표의 속성 이름이 클래스에 직접 추가됩니다.

ng-class="{'first second third': isTrue}" 

작품.

Answer 2

ng-class 지시어에 대해 알아야 할 사항은 실제로 전달한 값이 실제로는 JavaScript 인 것처럼 대략으로 평가된다는 것입니다. (실제로는 $scope.$eval을 사용합니다.) 그 의미는 $scope에서 사용할 수있는 함수를 호출하여 클래스 해시 객체를 생성 할 수 있다는 것입니다. 필자가 생각해 낸 해결책이 마음에 들었습니다. 필요한 클래스를 가져 와서 간격을 띄우는 것이 좋았지 만, 요소에 적용하려는 동적 클래스 목록이 있다면 어떻게해야할까요? 구문이 약 JavaScript이기 때문에 {list.join(' '): isTrue} (JavaScript에서는 유효하지 않으므로)을 수행하여 개체를 작성할 수 없습니다. 이것은 다음 HTML에 사용될 수

angular.module('app') 
    .controller('MyCtrl', function($scope) { 
    $scope.myList = ['first', 'second', 'third']; 

    $scope.allOrNoneClasses = function(list, condition) { 
     var o = {}; 
     if (condition) { 
     o[list.join(' ')] = true; 
     } 
     return o; 
    }; 
    $scope.scopeBasedClasses = function(list) { 
     var o = {}; 
     list.forEach(function(class){ 
     // this applies a class which matches the scope attribute if 
     // the attribute evaluates to a truthy value. 
     o[class] = $scope.$eval(class); 
     }); 
     return o; 
    }; 
    }); 

다음과 같습니다 : 대한

<div ng-class="allOrNoneClasses(myList, isTrue)" />