如何使用Angular.js在單個類中添加多個條件

Question

我需要一個幫助。 我需要使用Angular.js在ng-class使用AND運算符添加多個條件。 我在下面解釋我的代碼。

<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>

這里我添加一個條件，但我需要為這兩個類添加另一個條件（ ie-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>