ng-class를 사용하는 AngularJS 토글 클래스

사용하여 요소의 클래스를 전환하려고합니다. ng-class

<button class="btn">
  <i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>

isAutoScroll () :

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

기본적으로, $scope.autoScroll사실이라면 ng-class가 icon-autoscroll되고 싶고 거짓이면 내가되고 싶습니다.icon-autoscroll-disabled

내가 지금 작동하지 않고 콘솔 에서이 오류가 발생합니다.

Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].

이 작업을 올바르게 수행하려면 어떻게합니까?

편집하다

해결책 1 : (구식)

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>

편집 2

해결책 2 :

Solution 3Stewie에서 제공 하는 솔루션을 사용해야합니다. 삼항 연산자와 관련하여 가장 읽기 쉬운 표준입니다. 해결책은

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>

다음과 같이 번역됩니다.

if (autoScroll == true) ?// 클래스 사용 'icon-autoscroll' :// 다른 용도'icon-autoscroll-disabled'

ng-class에서 조건부를 사용하는 방법 :

해결책 1 :

<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>

해결책 2 :

<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>

솔루션 3 (각도 v.1.1.4 +는 삼항 연산자에 대한 지원을 도입했습니다) :

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

플 런커

마지막 평가를 반환하는 자바 스크립트 논리 연산자 '&&'를 기반으로하는 대체 솔루션으로 다음과 같이 수행 할 수도 있습니다.

<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>

구문이 약간 짧지 만 읽기 쉽습니다.

조건에 따라 둘 이상의 클래스를 추가하십시오.

<div ng-click="AbrirPopUp(s)" 
ng-class="{'class1 class2 class3':!isNew, 
           'class1 class4': isNew}">{{ isNew }}</div>

적용 : class1 + class2 + class3 isNew = false 일

적용 : isNew = true 인 경우 class1 + class4

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

jQuery의 toggleClass메소드 와 유사하게 active요소를 클릭 할 때 클래스를 켜거나 끄는 방법 입니다.

자동 스크롤은 컨트롤러에서 정의되고 수정됩니다.

<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>

조건에 따라 여러 클래스를 추가하십시오.

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>

나는 이런 식 으로이 일을했다 :

<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)' >button two</button>

// 컨트롤러에서

 $scope.toggleClass = function (event){
        $(event.target).toggleClass('active');
    }