ng-class조건부 와 같은 것을 표현할 수있는 방법이 있습니까?

예를 들어 다음을 시도했습니다.

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

이 코드의 문제점은 무엇이든간에 obj.value1클래스 테스트가 항상 요소에 적용된다는 것입니다. 이것을하는 것 :

<span ng-class="{test: obj.value2}">test</span>

긴만큼 obj.value2truthy 값과 동일하지 않는 클래스가 적용되지 않음. 이제 첫 번째 예에서이 문제를 해결할 수 있습니다.

<span ng-class="{test: checkValue1()}">test</span>

어디 checkValue1이런 기능 외모 :

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

이것이 어떻게 ng-class작동 해야하는지 궁금합니다 . 또한 이와 비슷한 작업을 수행하려는 사용자 지정 지시문을 작성 중입니다. 그러나 표현을 볼 수있는 방법을 찾을 수 없습니다 (아마도 불가능하고 이것이 작동하는 이유 일 수도 있습니다).

여기에 내가 의미 하는 바를 보여주는 plnkr 이 있습니다.

당신의 첫 번째 시도는 거의 옳았습니다. 따옴표없이 작동해야합니다.

{test: obj.value1 == 'someothervalue'}

여기 plnkr이 있습니다.

ngClass 지시문은 Javascript 표현식과 약간 비슷하지만 약간의 차이점이있는 진실 또는 거짓을 평가하는 모든 표현식에서 작동 합니다 . 조건이 너무 복잡한 경우 세 번째 시도에서와 같이 진실하거나 거짓을 반환하는 함수를 사용할 수 있습니다.

보완하기 위해 : 논리 연산자를 사용하여 다음과 같은 논리식을 형성 할 수도 있습니다.

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

ng-repeat 내부에서 ng-class 사용

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

task.status의 각 상태마다 다른 클래스가 행에 사용됩니다.

Angular JS 는 ng-class Directive 에서이 기능을 제공합니다 . 조건을 입력하고 조건부 클래스를 지정할 수도 있습니다. 두 가지 방법으로이를 달성 할 수 있습니다.

타입 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

이 코드에서는 상태 값의 값에 따라 클래스가 적용됩니다

경우 상태 값이 0 다음 수준의 적용 을

경우 상태 값이 1 다음 클래스에 적용 이를

경우 상태 값이 2 다음 클래스에 적용 세

타입 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

신분의 가치에 따라 어떤 수업이 적용될 것인가

경우 상태 값이 1 또는 사실을 다음 클래스 추가합니다 test_yes을

경우 상태 값이 0 또는 false를 다음 클래스 추가합니다 test_no을

위의 훌륭한 예를 보았지만 모두 중괄호 (json map)로 시작합니다. 또 다른 옵션은 계산을 기반으로 결과를 반환하는 것입니다. 결과는지도뿐만 아니라 CSS 클래스 이름 목록 일 수도 있습니다. 예:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

또는

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

설명 : 상태가 활성이면 클래스 enabled가 사용됩니다. 그렇지 않으면 클래스 disabled가 사용됩니다.

이 목록 []은 하나가 아닌 여러 클래스를 사용하는 데 사용됩니다.

html 클래스 속성 및 속기 if / else와 함께 사용할 수있는 간단한 방법이 있습니다. 그렇게 복잡하게 만들 필요가 없습니다. 다음 방법을 사용하십시오.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

행복한 코딩, 니만 타 페레라

ng-class를 동적으로 적용 할 수있는 두 가지 방법을 보여 드리겠습니다.

1 단계

삼항 연산자를 사용하여

<div ng-class="condition?'class1':'class2'"></div>

산출

조건이 true이면 class1이 요소에 적용되고 그렇지 않으면 class2가 적용됩니다.

불리

런타임에 조건부 값을 변경하려고하면 클래스가 어떻게 든 변경되지 않습니다. 동적 클래스 변경과 같은 요구 사항이있는 경우 2 단계로 가도록 제안합니다.

2 단계

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

산출

조건이 value1과 일치하면 class1이 요소에 적용되고 value2와 일치하면 class2가 적용됩니다. 그리고 동적 클래스 변경은 잘 작동합니다.

이것이 도움이되기를 바랍니다.

각도 구문은 : 연산자를 사용하여 if 한정자 와 동등한 기능을 수행하는 것입니다.

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

짝수 행에 clearfix 클래스를 추가하십시오. 그럼에도 불구하고 표현은 우리가 정상적인 조건에서 가질 수있는 것이 될 수 있으며 참 또는 거짓으로 평가되어야합니다.

ng-class와 함께 함수를 사용하는 것은 적절한 CSS 클래스를 결정하기 위해 복잡한 논리를 실행해야 할 때 좋은 옵션입니다.

http://jsfiddle.net/ms403Ly8/2/

HTML :

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS :

.testclass { Background: lightBlue}

자바 스크립트 :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

이것을 사용하십시오

<div ng-class="{states}[condition]"></div>

예를 들어 조건이 [2 == 2] 인 경우 상태는 {true : '...', false : '...'}입니다.

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Angular 2의 경우 이것을 사용하십시오

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-class핵심 AngularJ의 지시문입니다. "String Syntax", "Array Syntax", "Evaluated Expression", "Ternary Operator"및 아래에 설명 된 더 많은 옵션을 사용할 수 있습니다.

문자열 구문을 사용하는 ngClass

ngClass를 사용하는 가장 간단한 방법입니다. ng-class에 Angular 변수를 추가하면 해당 요소에 사용될 클래스가됩니다.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

문자열 구문을 사용 하는 ngClass의 데모 예

배열 구문을 사용한 ngClass

여러 클래스를 적용 할 수 있다는 점을 제외하면 문자열 구문 방법과 유사합니다.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

평가 식을 사용한 ngClass

ngClass (및 아마도 가장 많이 사용하는 방법)를 사용하는 고급 방법은 식을 평가하는 것입니다. 이것이 작동하는 방식은 변수 또는 표현식이로 평가 true되면 특정 클래스를 적용 할 수 있다는 것입니다. 그렇지 않으면 수업이 적용되지 않습니다.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

평가 식을 사용한 ngClass의 예

값을 사용하는 ngClass

이는 여러 값을 유일한 변수와 비교할 수 있다는 점을 제외하고는 평가 된 표현식 방법과 유사합니다.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

삼항 연산자를 사용한 ngClass

삼항 연산자는 속기를 사용하여 두 개의 다른 클래스를 지정할 수 있습니다. 하나는 표현식이 true이고 하나는 false입니다. 삼항 연산자의 기본 구문은 다음과 같습니다.

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

첫 번째, 마지막 또는 특정 숫자 평가

당신이 사용하는 경우 ngRepeat지시를하고에 클래스를 적용 할 first, last목록에서, 또는 특정 번호, 당신의 특별한 속성을 사용할 수 있습니다 ngRepeat. 이들은 포함 $first, $last, $even, $odd, 그리고 몇 가지 다른. 사용 방법의 예는 다음과 같습니다.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>