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

尝试使用具有多种条件的ng-class,第1张

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

ng-class =“(accounts.length == 1&& account.cardName =='Cash')?'one-dash-cash':''”

ng-class =“(accounts.length == 1&& account.cardName =='Points')?'one-dash':''”

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

提前致谢..

最佳答案:

3 个答案:

答案 0 :(得分:0)

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

  1. 将您的逻辑放在控制器中而不是内联(我会使用)

    $scope.isOneDash = $scope.accounts.length == 1 && $scope.account.cardName =='Points';
    $scope.isOneDashCash = $scope.accounts.length == 1 && $scope.account.cardName =='Cash'; 
    
  2. 在你的HTML中

    <div ng-class="{
           'one-dash-cash': isOneDashCash,
            'one-dash': isOneDash
        }">Hello</div>
    
    1. 使用属性指令。对你的情况来说这可能是一种矫枉过正,但肯定是一种方式。

      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');
        }
      }
        }})
      
    2. 答案 1 :(得分:0)

      您可以将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

      答案 2 :(得分:0)

      ng-class="{'one-dash-cash':accounts.length == 1 && account.cardName =='Cash','one-dash':accounts.length == 1 && account.cardName =='Points'}"
      
      本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复