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>

这里我添加了一个条件，但我需要为这两个类添加另一个条件（i.e-place.cstatus==1 and place.cstatus==0）。请帮忙。

Answer 1

使用＆amp;＆amp; 代替和。

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

Answer 2

如前所述，您还可以创建一个接受参数并返回类名的函数。

这种方法的好处是，它将保持您的视图清洁，逻辑将保留在JS中。这也使它更易于配置，因为您可以编写代码并在多个元素之间共享它。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何使用Angular.js在单个类中添加多个条件

3 个答案: