[英]How to add multiple condition in a single class using Angular.js
我需要一个帮助。 我需要使用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
)。 请帮忙。
使用&&而不是和 。
(i.e-place.cstatus==1 && place.cstatus==0)
如前所述,您还可以创建一个带参数和返回类名的函数。
这种方法的好处是,它将保持您的视图清洁,逻辑将保留在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>
只需使用&&
即可解决条件
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.