OR 연산자가 있는 AngularJsng급 다중 조건

OR 연산자가 있는 AngularJsng급 다중 조건

각 값에 따라 수업을 추가할 때 좋은 구문을 알아보려고 합니다.OR 연산자와 함께 2가지 조건(라이브 사용자 변경 시, 데이터 로딩 시)에 대한 클래스를 활성화하고 싶습니다.

다음 줄입니다.

 <a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i class="fa orange" ng-class="{'fa-star': (favorite || (fav==myfav.id)), 'fa-star-o': !favorite}"></i>
 </a>

나는 이것과 같은 몇가지 다른 코드를 시도해보았습니다.

 ng-class="{'fa-star': favorite, 'fa-star': (fav==myfav.id), 'fa-star-o': !favorite}"

아무 성과도 없이누가 내가 좋은 구문을 찾는 것을 도와줄 수 있습니까?

이거 먹어봐요.

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
 <i class="fa orange" ng-class="{'fa-star': favorite || fav==myfav.id, 'fa-star-o': !favorite}"></i>

대괄호는 필요 없습니다.

일단 당신은 뒤에 논리를 추가해야 합니다.ng-class이를 위해서는 항상 컨트롤러를 사용하는 것을 위해서는 컨트롤러를 사용하는 것이 더 좋습니다.JSON 구문(HTML에 있는 것과 같음) 또는 JavaScript의 두 가지 방법 중 하나를 수행할 수 있습니다.

HTML (JSON) 구문

HTML

<i ng-class="getFavClassIcon(myFav.id)"></i>

JS

$scope.getFavClassIcon= function (favId) {
    return {
        'fa-star-o' : !$scope.favorite,
        'fa-star'   : $scope.favorite || $scope.fav === favId
    };
};

양호한 구 IF-statement (자바스크립트)

HTML

<i ng-class="getFavClassIcon(myFav.id)"></i>

JS

$scope.getFavClassIcon= function (favId) {
    if (!$scope.favorite) {
        return 'fa-star-o';
    } else if ($scope.favorite) { // obviously you can use OR operator here
        return 'fa-star';
    } else if ($scope.fav === favId) {
        return 'fa-star';
    }
};

HTML은 그대로 유지됩니다.

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i ng-class="{'fa-star-o':!favorite,'fa-star':favorite||fav===myfav.id}"></i>
</a>

그러나 CSS 파일에 클래스가 있는 순서가 중요할 것입니다.

그fa-star수업은 다음 시간에 적용될 것입니다.favorite참이거나fav===myfav.idtrue를 반환합니다.

따라서 한 번 클릭한 후 다음과 같이 가정합니다.fav===myfav.idtrue를 반환하고 계속 true를 반환합니다. 다시 클릭할 때에도 클래스가 계속해서 true를 반환합니다.fa-star그때부터 항상 적용될 것입니다.

기본적으로 인 경우favorite그렇다면 거짓입니다.fa-star-o템플릿이 처음 로드될 때 적용됩니다. 그러나 첫 번째 클릭 후,favoritetrue로 설정되면 제거됩니다.그런 다음 두 번째를 클릭합니다.favorite다시 false로 설정됩니다.fa-star-o적용은 되지만 이 경우에는.fa-star수업 또한 다음과 같이 적용될 것입니다.fa===myfav.id조건이 여전히 참으로 반환됩니다(이 경우를 가정할 때).

따라서 두 클래스가 요소에 동시에 존재할 때 발생할 수 있으므로 요소에 존재할 때 어떤 클래스를 확실히 적용해야 하는지 우선순위를 정해야 합니다.예를 들어 만약fa-star-o클래스는 더 높은 우선순위를 취하고, 아래에 그것을 둡니다.fa-star예를 들어, 당신의 CSS에

.fa-star {
  border: 1px solid #F00;
}
.fa-star-o {
  border: 1px solid #000;
}

http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview 에서 작업 데모 참조

ng-class와 함께 식을 사용할 수 있습니다.

  <i class="fa orange" ng-class="favorite || fav == myfav.id ? 'fav' : 'no-fav'"></i>

예를 들어,제 시나리오에서는 어떤 조건에서는 대문자 클래스를 적용해야 하고 어떤 조건에서는 대문자 클래스를 적용할 필요가 없습니다.

inputTextCapitalSmall(assetId) {
    return {
      'uppercase': assetId !== 'TELEKURS' && assetId !== 'REUTERS' && assetId !== 'S&P',
    };
  }

<form [formGroup]="querySearchForm" >
  <input autocomplete="off" matInput id="assetIdTypeValue" [ngClass]="inputTextCapitalSmall(querySearchForm.value.assetIdType)" >
</form>

언급URL : https://stackoverflow.com/questions/24287725/angularjs-ng-class-multiple-conditions-with-or-operator