클래스를 조건부로 적용하는 가장 좋은 방법은 무엇입니까?

질문자 :respectTheCode

각 요소에 대한 li selectedIndex 라는 컨트롤러의 속성이 ul 로 렌더링된 배열이 있다고 가정해 보겠습니다. AngularJS에서 selectedIndex 인덱스 li 클래스를 추가하는 가장 좋은 방법은 무엇입니까?

나는 현재 (손으로) li li 태그 중 하나에 클래스를 추가하고 ng-show 및 ng-hide 를 사용하여 인덱스당 li 만 표시합니다.

저처럼 CSS 클래스 이름을 컨트롤러에 넣지 않으려면 v1 이전부터 사용하는 오래된 트릭이 있습니다. 사용자 지정 지시문이 필요하지 않은 selected 클래스 이름으로 직접 평가되는 표현식을 작성할 수 있습니다.

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

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

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

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

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

그러나 이러한 방법은 기능적으로 동일하지 않습니다. 다음은 예입니다.

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

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

orcun

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

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

따라서 양식 3)을 사용하여 간단히 작성할 수 있습니다.

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

AngularJS에서 CSS 스타일을 조건부로 적용하는 방법 도 참조하세요. 더 넓은 답변을 위해.

---

업데이트 : Angular 1.1.5는 삼항 연산자에 대한 지원을 추가했습니다. 따라서 해당 구조가 더 친숙하다면:

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

Mark Rajcok

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

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

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

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

skmvasu

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

 <class="ng-class:isSelected">

여기서 'isSelected'는 범위가 지정된 각도 컨트롤러 내에 정의된 자바스크립트 변수입니다.


귀하의 질문을 보다 구체적으로 다루기 위해 다음과 같이 목록을 생성할 수 있습니다.

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

stefano

다음은 훨씬 간단한 솔루션입니다.

 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>

user81962

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

 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>

Lèse majesté

바이너리 평가를 넘어 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>

Joe Steele

내가 최근에 한 것은 다음과 같습니다.

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

isShowing 값은 버튼 클릭으로 토글되는 내 컨트롤러에 있는 값이고 단일 괄호 사이의 부분은 내 CSS 파일에서 생성한 클래스입니다.

편집: 나는 또한 codeschool.com에 AngularJS에서 Google이 후원하는 무료 과정이 있다는 것을 추가하고 싶습니다. 비용을 지불할 필요가 없습니다. 계정에 가입하고 시작하세요! 행운을 빕니다!

Pytth

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

따라서 이를 수행하는 가장 간단한 방법은 다음과 같습니다.

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

lionroots

조건으로 반환 클래스를 관리 하는 함수 를 만들 수 있습니다.

 <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 에서 전체 코드 페이지를 참조할 수 있습니다.

Lewis Hai

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

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

이것은 var를 기반으로 한 클래스를 조건부로 적용합니다. 기본적으로 icon-download 로 시작하고 ng-class를 사용하여 true/false 경우 showDetails 의 상태를 확인하고 class icon-upload를 적용합니다. 잘 작동합니다.

도움이 되기를 바랍니다.

Ravi Ram

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

 <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>

Aliti

이것은 아마도 망각에 빠질 것입니다. 그러나 다음은 테이블의 행이 첫 번째, 중간 또는 마지막 행인지 여부에 따라 클래스를 전환하기 위해 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>

sundar

이것은 내 작업에서 여러 조건부로 판단합니다.

 <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>

H.jame

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

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

(ng-attr-을 사용하려면 최신 불안정한 Angular에 있어야 한다고 생각합니다. 저는 현재 1.1.4에 있습니다.)

Ashley Davis

글쎄, 나는 당신이 true 또는 false를 반환하는 함수로 컨트롤러의 조건을 확인하는 것이 좋습니다.

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

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

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

Sheelpriy

부분적인

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

Caner

Angular v1.1.5 이전 버전 (즉, 삼항 연산자 없음) 을 사용 중이고 두 조건 모두에서 값을 설정하는 동일한 방법을 원하면 다음과 같이 할 수 있습니다.

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

Scotty.NET

많은 요소에 적용되는 공통 클래스가 있는 경우 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'); }); }; }]);

더 많은 정보

lars1595

많은 검색 끝에 오늘 나를 위해 일한 것을 추가했습니다 ...

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

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

=)

문서화되지 않은 표현식 구문 : 훌륭한 웹사이트 링크... =)

Robert Green MBA

이것을 확인하십시오.

악명 높은 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 }

감사합니다 amadou

Victor Cruz

이 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})} />

Tushar Sharma

출처 : http:www.stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class