[css] 조건부로 수업을 적용하는 가장 좋은 방법은 무엇입니까?

Program / 글쓴이

당신이 렌더링되는 배열이 있다고 가정하자 ul와 li각 요소라는 컨트롤러의 속성을 selectedIndex. AngularJS li의 인덱스 selectedIndex를 사용하여 클래스를 추가하는 가장 좋은 방법은 무엇입니까 ?

나는 현재 li코드를 (수동으로) 복제 하고 li태그 중 하나에 클래스를 추가하고 색인 당 하나만 사용 ng-show하고 ng-hide표시합니다 li.

답변

CSS 클래스 이름을 컨트롤러에 넣고 싶지 않다면 v1 일 이전부터 사용했던 오래된 트릭이 있습니다. 선택한 클래스 이름으로 직접 평가되는 표현식을 작성할 수 있으며 사용자 지정 지시문이 필요하지 않습니다.

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

콜론이있는 이전 구문에 유의하십시오.

조건부로 클래스를 조건부로 적용하는 새로운 더 좋은 방법도 있습니다.

ng-class="{selected: $index==selectedIndex}"

Angular는 이제 객체를 반환하는 표현식을 지원합니다. 이 객체의 각 속성 (이름)은 이제 클래스 이름으로 간주되며 해당 값에 따라 적용됩니다.

그러나 이러한 방식은 기능적으로 동일하지 않습니다. 예를 들면 다음과 같습니다.

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

따라서 기본적으로 모델 속성을 클래스 이름에 매핑하여 기존 CSS 클래스를 재사용하고 동시에 CSS 클래스를 컨트롤러 코드에서 제외시킬 수 있습니다.

답변

ng-class 는 다음 중 하나로 평가되어야하는 표현식을 지원합니다.

  1. 공백으로 구분 된 클래스 이름의 문자열 또는
  2. 클래스 이름의 배열 또는
  3. 부울 값에 대한 클래스 이름의 맵 / 개체.

따라서 3) 형식을 사용하면 간단히 쓸 수 있습니다.

ng-class="{'selected': $index==selectedIndex}"

AngularJS에서 CSS 스타일을 조건부로 적용하는 방법 도 참조하십시오 . 더 넓은 대답을 위해.

업데이트 : Angular 1.1.5는 삼항 연산자에 대한 지원을 추가 했으므로 해당 구조가 더 익숙한 경우 :

ng-class="($index==selectedIndex) ? 'selected' : ''"

답변

내가 가장 좋아하는 방법은 삼항식을 사용하는 것입니다. 

ng-class="condition ? 'trueClass' : 'falseClass'"

참고 : 이전 버전의 Angular를 사용하는 경우 대신이 버전을 사용해야합니다.

ng-class="condition && 'trueClass' || 'falseClass'"

답변

이 답변 중 일부는 오래된 것으로 보이므로 여기에 추가하겠습니다. 내가하는 방법은 다음과 같습니다.

<class="ng-class:isSelected">

여기서 ‘isSelected’는 범위가 지정된 각도 제어기 내에 정의 된 Javascript 변수입니다.

질문을보다 구체적으로 설명하기 위해 다음과 같이 목록을 생성하는 방법은 다음과 같습니다.

HTML 

<div ng-controller="ListCtrl">
    <li class="ng-class:item.isSelected" ng-repeat="item in list">
       {{item.name}}
    </li>
</div>

JS 

function ListCtrl($scope) {
    $scope.list = [
        {"name": "Item 1", "isSelected": "active"},
        {"name": "Item 2", "isSelected": ""}
    ]
}

참조 : http://jsfiddle.net/tTfWM/

참조 : http://docs.angularjs.org/api/ng.directive:ngClass

답변

훨씬 간단한 해결책은 다음과 같습니다. 

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;

    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }

    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }

    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

스 니펫 확장

답변

최근에 비슷한 문제에 직면하여 조건부 필터를 만들기로 결정했습니다.

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

단일 요소 인 2 요소 배열 또는 문자열을 사용하여 두 번째 요소로 빈 문자열이 추가 된 배열로 바뀝니다.

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

답변

이진 평가를 넘어서고 CSS를 컨트롤러에서 벗어나려면 맵 객체에 대한 입력을 평가하는 간단한 필터를 구현할 수 있습니다.

angular.module('myApp.filters, [])
  .filter('switch', function () {
      return function (input, map) {
          return map[input] || '';
      };
  });

이를 통해 다음과 같이 마크 업을 작성할 수 있습니다.

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>