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)"

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

Answer 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加入的条件（即&&）（即|| ）。使用right-associativity（即(和) - A.K.A.括号）在需要时使用Maven Bundle Plugin documentation。

例如，这一行：

(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>

Answer 2

Sam的回答是正确的，无论如何以更广阔的视角看待这一点，您应该再次考虑是否应该在视图级别或控制器中进行此决策。

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

Answer 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
"

Answer 4

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

ng-if="!item.title" - 不再有效了！或其他人不是无效的特征。像：

https://docs.angularjs.org/error/ $解析/ lexerr P0 =意外％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中使用以下内容表达式：条件，循环或异常。

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

angularjs - ng-if多个条件

4 个答案:

分配运算符与等于运算符

运营商优先级和关联性

将逻辑移至控制器