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

당신이 렌더링되는 배열이 있다고 가정하자 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>

내가 최근에 그렇게 한 것은 :

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

그만큼 isShowing값은 내 CSS 파일의 버튼과 하나의 괄호 사이의 부분의 클릭으로 전환됩니다 내 컨트롤러에 내가 만든 클래스를하는 위치하는 값이다.

편집 : 또한 codeschool.com에 AngularJS에서 Google이 후원하는 무료 코스가 있으며이 모든 것을 다룬 다음 추가 과정을 추가하고 싶습니다. 아무것도 지불 할 필요가 없습니다. 계정에 가입하면됩니다! 모두에게 행운을 빕니다!

삼항 연산자 가 1.1.5 에서 각도 파서에 추가 되었습니다 .

따라서 가장 간단한 방법은 다음과 같습니다.

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

조건에 따라 리턴 클래스를 관리 하는 기능 을 만들 수 있습니다

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

그리고

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

예를 들어 ng-class 에서 전체 코드 페이지를 참조 할 수 있습니다

나는 Angular를 처음 사용하지만이 문제를 해결하기 위해 이것을 발견했습니다.

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

이것은 조건에 따라 var를 기반으로 클래스를 적용합니다. 기본으로 아이콘 다운로드 로 시작하고 ng-class를 사용하여 상태를 showDetails확인 true/false하고 클래스 아이콘 업로드를 적용 합니다. . 잘 작동합니다.

도움이 되길 바랍니다.

이것은 매력처럼 작동합니다.)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

이것은 아마도 망각으로 떨어질 것입니다. 그러나 테이블에 하나의 행이있는 경우를 제외하고 테이블의 행이 첫 번째, 중간 또는 마지막인지에 따라 1.1.5의 삼항 연산자를 사용하여 클래스를 전환하는 방법이 있습니다.

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

이것은 내 작업에서 여러 조건부 판사입니다.

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

다음은 ng-class를 사용할 수 없을 때 (예 : SVG 스타일링) 잘 작동하는 다른 옵션입니다.

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(ng-attr-를 사용하려면 최신 불안정한 각도에 있어야한다고 생각합니다. 현재 1.1.4입니다.)

음 나는 true 또는 false를 반환하는 함수로 컨트롤러의 상태를 확인하는 것이 좋습니다. .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

컨트롤러에서 상태를 확인하십시오.

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

부분적인

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

제어 장치

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

앵귤러 프리 v1.1.5 (즉, 삼항 연산자 없음)를 사용 하고 있고 두 조건 에서 값을 설정하는 동등한 방법을 원한다면 다음과 같이 할 수 있습니다.

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

많은 요소에 적용되는 공통 클래스가있는 경우 ng-show / ng-hide와 같이 해당 클래스를 추가하는 사용자 지정 지시문을 만들 수 있습니다.

이 지시어는 버튼을 클릭하면 'active'클래스를 버튼에 추가합니다.

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

더 많은 정보

많은 검색 후 오늘 나에게 도움이 된 것을 추가하십시오 ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

이것이 성공적인 개발에 도움이되기를 바랍니다.

=)

문서화되지 않은 표현식 구문 : Great Website Link ... =)

이것을 확인 하십시오 .

악명 높은 AngularJS if|else선언문 !!!
Angularjs를 사용하기 시작했을 때 if / else 문을 찾을 수 없다는 것에 약간 놀랐습니다.

그래서 나는 프로젝트에서 일하고 있었고 if / else 문을 사용할 때로 드하는 동안 조건이 표시되는 것을 알았습니다. ng-cloak을 사용하여이 문제를 해결할 수 있습니다.

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

감사합니다

이 npm 패키지를 사용할 수 있습니다 . 모든 것을 처리하고 변수 또는 함수를 기반으로 정적 및 조건부 클래스에 대한 옵션이 있습니다.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />