angularjs - ng-if 多重条件

Question

所以之前有人问过这个问题，但我的问题并不像 ng-if="country == 'ireland' || country='United Kingdom'" 那么简单

我需要做类似的事情：

 ng-if="(country='ireland' || country='united kingdom') || (name='John' || name='Joe')"

我在做什么是这样的：

ng-if=" (settings.eur && title.usa != undefined || title.leak != undefined) || (settings.usa && title.eur != undefined || title.leak != undefined) || (settings.leak && title.eur != undefined || title.usa != undefined) || (settings.leak == false && settings.eur == false && settings.usa == false)"

但它只是触发了第一行，或者至少这就是它似乎在做的事情。

原文由 Shiny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现我做错了什么。

使用 if 标签，您的表达式可以使用三元运算符和 () Unsure what its called 。

例如：

country == Ireland && (firstname == John || lastname == Doe) && console == PC

意思是：

If the country is Ireland AND firstname is john OR lastname is Doe AND console is PC then return true.

而它出错的地方是 ()。您需要在右括号后加上 == true 才能使其真正起作用。

这让我可以在一个 ng-if 中做很多表达式/条件。

最终代码（这是我用它做的一个例子）：

 ng-if="
settings.eur == true && settings.usa == false && settings.leak == false && (title.usa != undefined || title.rf != undefined || title.leak != undefined) == true ||
settings.usa == true && settings.eur == false && settings.leak == false && (title.eur != undefined || title.rf != undefined || title.leak != undefined) == true ||
settings.leak == true && settings.eur == false && settings.usa == false && (title.eur != undefined || title.usa != undefined || title.rf != undefined) == true ||

settings.eur == true && settings.usa == true && settings.leak == true && (title.usa != undefined && title.eur != undefined || title.rf != undefined) == true ||
settings.eur == true && settings.usa == true && settings.leak == false && (title.usa != undefined && title.eur != undefined || title.leak != undefined || title.rf != undefined) == true ||
settings.eur == true && settings.usa == false && settings.leak == true && (title.usa != undefined || title.rf != undefined) == true ||
settings.eur == false && settings.usa == true && settings.leak == true && (title.eur != undefined || title.rf != undefined) == true ||

settings.leak == false && settings.eur == false && settings.usa == false
"

原文由 Shiny 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里有几件事需要考虑：

赋值运算符与相等运算符

使用 javascript 相等运算符（即 == ）而不是 赋值运算符（即 = ）：

 ng-if="(country=='ireland' || country=='united kingdom') || (name=='John' || name=='Joe')"

运算符优先级和结合性

此外，考虑 运算符优先级——是否应在通过 逻辑 OR 连接的条件（即 && ）之前评估与 逻辑 AND 连接的条件（即 || ）。使用 分组运算符（即 ( 和 ) 又名括号）在需要时使用 右结合性。

例如，这一行：

 (settings.eur && title.usa != undefined || title.leak != undefined)

可以更改为右结合性：

 (settings.eur && (title.usa != undefined || title.leak != undefined))

或者保持左结合性：

 ((settings.eur && title.usa != undefined) || title.leak != undefined)

将逻辑移至控制器

正如评论中提到的那样，大条件中的逻辑可能应该移到某些控制器逻辑中。这将使更新和分离业务逻辑与标记变得更简单。

一种方法是声明一个函数，如下例所示。也许比检查变量是否为 undefined 更简单的方法是将它们初始化为默认布尔值（例如 false ），如下例所示。尝试切换复选框：

 angular.module('app', [])
  .controller('cont', function($scope) {
    $scope.country = 'ireland';
    $scope.name = 'Joe';
    $scope.settings = {
      eur: true,
      leak: false,
      usa: false
    };
    $scope.shouldShowLargerComplexContainer = function() {
      if (($scope.settings.leak == false && $scope.settings.eur == false && $scope.settings.usa == false)) {
        return true;
      }
      return false;
    };
  });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="cont">
  country? name?
  <div ng-if="(country=='ireland' || country=='united kingdom') || (name=='John' || name=='Joe')">country Ireland and name is joe or john</div>
  Complex logic div?
  <div ng-if="shouldShowLargerComplexContainer()">larger complex div</div>
  <div>
    <input type="checkbox" ng-model="settings.eur" />eur</div>
  <div>
    <input type="checkbox" ng-model="settings.leak" />leak</div>
  <div>
    <input type="checkbox" ng-model="settings.usa" />usa</div>
</div>

原文由 Sᴀᴍ Onᴇᴌᴀ 发布，翻译遵循 CC BY-SA 4.0 许可协议