angularjs - ng-if 多个条件答案

【问题标题】：angularjs - ng-if Multiple Conditionsangularjs - ng-if 多个条件
【发布时间】：2016-12-10 16:54:06
【问题描述】：

所以之前有人问过这个问题，但我的问题不像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)"

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

【问题讨论】：

只触发第一行，意味着(settings.eur && title.usa != undefined || title.leak != undefined) 总是为真？
为什么你认为它只触发了第一行？
先尝试简单的条件看看它是否有效，也尝试输出你的变量，这样你就可以看到它们有什么值。 {{ settings.eur }}...
正如答案所暗示的那样，好处是不要用实际上属于 JS 的冗长逻辑污染模板。

标签： javascript angularjs angular-ng-if

【解决方案1】：

这里有几点需要考虑：

赋值运算符与相等运算符

使用 javascript equality operator（即==）代替assignment operator（即=）：

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

运算符优先级和关联性

此外，考虑operator precedence - 与logical AND（即&&）连接的条件是否应在通过logical OR（即||）连接的条件之前评估。在需要时使用grouping operators（即( 和) - A.K.A. 括号）来使用right-associativity。

例如，这一行：

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

可以更改为右关联性：

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

或保持左关联性：

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

将逻辑移至控制器

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

一种方法是声明一个函数，如下例所示。也许比检查变量是否为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>

【讨论】：

我的错！国家位只是示例 - 我需要帮助的真正代码是最后的大块
好的，在代码sn-p之前看我更新的解释
括号对我的错误很重要，但在其他回复中未提及。谢谢！！

【解决方案2】：

Sam 的反应是好的，无论如何，从更广泛的角度来看，您应该重新考虑是否应该在视图级别或控制器中做出此决定。

一般情况下，尽量不要在视图中放置任何逻辑，以免拆分逻辑并增加属性的维护成本。（也更容易测试JS部分内部的逻辑）

【讨论】：

【解决方案3】：

我发现我做错了什么。
使用 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
"

【讨论】：

您可以在codereview.stackexchange.com 上发布关于简化此逻辑的信息...
请查看我的更新答案，讨论运算符优先级和关联性

【解决方案4】：

Angular 1.5.9+ 不允许将条件放入表达式中。或者有一种新的魔术方法。请确认我是否错了，因为我可能会遗漏一些东西。

ng-if="!item.title" - 不再有效，因为！或其他不是无效字符。喜欢：

https://docs.angularjs.org/error/$parse/lexerr?p0=Unexpected%20nextharacter&p1=s13-13%20%5B%3D%5D&p2=item.title%3Dfalse

在更新日志 (https://github.com/angular/angular.js/blob/master/CHANGELOG.md) 中，它被称为：提高赋值表达式的性能 ?

https://docs.angularjs.org/guide/expression

无控制流语句：您不能在 Angular 中使用以下内容表达式：条件、循环或异常。

我看到的唯一解决方案是将表达式移动到控制器中，但我还不知道该怎么做，我在模板中有多个循环。最好不要升级angular。

【讨论】：