programing

AngularJSongClass 조건부

newsource 2023. 5. 10. 21:13

AngularJSongClass 조건부

조건부 표현을 할 수 있는 방법이 있습니까?

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

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

이 코드의 문제는 어떤 일이 있어도obj.value1됩니다.", 클스테스항상요소적에용됩니다는트래즉,▁is적다용니됩▁is▁test▁the,요.수행:

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

만큼.obj.value2클래스가 적용되지 않으므로 truth 값과 같지 않습니다.이제 다음 작업을 수행하여 첫 번째 예제에서 문제를 해결할 수 있습니다.

<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-class inside ng-repeat 사용

<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 JSng-class Directive에서 이 기능을 제공합니다.조건을 지정하고 조건 클래스를 할당할 수 있습니다.두 가지 다른 방법으로 이를 달성할 수 있습니다.

유형 1

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

이 코드 클래스는 상태 에 따라 적용됩니다.

상태 값이 0이면 클래스 1을 적용합니다.

상태 값이 1이면 클래스 2를 적용합니다.

상태 값이 2이면 클래스 3을 적용합니다.


유형 2

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

상태 값별로 적용할 클래스

상태 이 1 또는 true이면 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단계

3항 연산자 사용

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

산출량

조건이 참이면 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}

JavaScript:

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

Angular 2의 경우 다음을 사용합니다.

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

이것을 사용합니다.

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

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

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

ng-class는 코어 AngularJs의 지침입니다.여기서 "문자열 구문", "어레이 구문", "평가된 표현식", "타원 연산자" 및 아래에 설명된 더 많은 옵션을 사용할 수 있습니다.

문자열 구문을 사용하는 ngClass

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

<!-- 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(가장 많이 사용할 수 있는 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>

3차 연산자를 사용한 ngClass

삼원 연산자를 사용하면 속기를 사용하여 두 개의 다른 클래스를 지정할 수 있습니다. 하나는 식이 참이고 다른 하나는 거짓입니다.3진 연산자의 기본 구문은 다음과 같습니다.

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>

언급URL : https://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional