Angular.jsを使用して単一のクラスに複数の条件を追加する方法

Question

助けが必要です。 Angular.jsを使用して、AND演算子を含む複数の条件をng-classに追加する必要があります。私は以下のコードを説明しています。

<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)"> 
    <i ng-class="{'fa fa-minus-circle': place.expanded, 'fa fa-plus-circle': !place.expanded }"></i> 
    {{place.root_des}} 
</div> 

ここで私は1つの条件を追加していますが、私は両方のクラスの別の条件（i.e-place.cstatus==1 and place.cstatus==0）を追加する必要があります。助けてください。

Answer 1

使用& &の代わりに、と。

(i.e-place.cstatus==1 && place.cstatus==0) 

Answer 2

前述のように、引数を取り、クラス名を返す関数を作成することもできます。

このアプローチの利点は、ビューをきれいに保ち、ロジックがJSにとどまることです。これにより、コードを記述して複数の要素にまたがって共有できるようになるので、コードを構成しやすくなります。

function myCtrl($scope) { 
 
    $scope.place = { 
 
    expanded: false, 
 
    cstatus: 1, 
 
    root_des: 'test' 
 
    } 
 

 
    $scope.manageCollapseExpand = function(place, seleccted) { 
 
    place.expanded = !place.expanded 
 
    } 
 

 
    // assuming place should be an array 
 
    $scope.getClasses = function(index) { 
 
    var className = 'fa '; 
 
    if ($scope.place.expanded && $scope.place.cstatus === 1) { 
 
     className += 'fa-minus-circle ' 
 
    } else { 
 
     className += 'fa-plus-circle '; 
 
    } 
 

 
    return className 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller='myCtrl'> 
 
    <div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)"> 
 
    <i ng-class="getClasses(0)"></i> 
 
    {{place.root_des}} 
 

 
    <p>Classes: {{getClasses(0)}}</p> 
 
    </div> 
 
</div>

Answer 3

は、単にあなたが&&

<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)"> 
    <i ng-class="{'fa fa-minus-circle': place.expanded && place.cstatus==1, 'fa fa-plus-circle': !place.expanded && place.cstatus==0 }"></i> 
    {{place.root_des}} 
</div>