Question

我正在尝试设置一个ng-class来处理有两个条件的div：

ng-class =“（accounts.length == 1＆amp;＆amp; account.cardName =='Cash'）？'one-dash-cash'：''”

和

ng-class =“（accounts.length == 1＆amp;＆amp; account.cardName =='Points'）？'one-dash'：''”

实现这一目标的最佳方法是什么？我已经读过，我不应该在HTML中使用所有这些逻辑，但我不知道该怎么做。

提前致谢..

Answer 1

ng-class="{'one-dash-cash':accounts.length == 1 && account.cardName =='Cash','one-dash':accounts.length == 1 && account.cardName =='Points'}"

Answer 2

您可以将js地图传递给ng-class。

<div ng-class="{
       'one-dash-cash':accounts.length == 1 && account.cardName =='Cash',
        'one-dash':accounts.length == 1 && account.cardName =='Points'
}"></div>

因此，根据条件，适当的类将应用于元素。

ng-class参考https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

Shankar和user3227295提供的答案是正确的并且工作正常，但您可以使用2种替代方法。我并不是说它们比已经提到的要好，但最好还是要注意它们。 Here是一个展示所有三种方法的傻瓜。

将您的逻辑放在控制器中而不是内联（我会使用）

$scope.isOneDash = $scope.accounts.length == 1 && $scope.account.cardName =='Points';
$scope.isOneDashCash = $scope.accounts.length == 1 && $scope.account.cardName =='Cash';

在你的HTML中

<div ng-class="{
       'one-dash-cash': isOneDashCash,
        'one-dash': isOneDash
    }">Hello</div>

使用属性指令。对你的情况来说这可能是一种矫枉过正，但肯定是一种方式。

app.directive('dashOrCash', function() {
  return {
retrict: 'A',
link: function(scope, elem) {
  if (scope.accounts.length == 1 && scope.account.cardName =='Cash') {
    elem[0].classList.add('one-dash-cash');
  }
  if (scope.accounts.length == 1 && scope.account.cardName =='Points') {
    elem[0].classList.add('one-dash');
  }
}
  }})

尝试使用具有多种条件的ng-class

3 个答案: