angularjs

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

这里有几点需要考虑：

赋值运算符与相等运算符

使用javascriptequality operator (i.e. ==) instead of assignment operator（即=）：

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

运算符优先级和结合性

此外，在需要时考虑operator precedence - whether the conditions joined with the logical AND (i.e. &&) should be evaluated before those joined via logical OR (i.e. ||). Use the grouping operators (i.e. ( and ) - A.K.A. parentheses) to use 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)

将逻辑移至控制器

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

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

山姆的回答还可以，无论如何从更广阔的角度来看这个你应该再考虑一下这个决定应该在视图级别还是在控制器中进行。

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

Answer 3

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

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

https://docs.angularjs.org/error/$parse/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

No Control Flow Statements: You cannot use the following in an Angular expression: conditionals, loops, or exceptions.

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

Answer 4

我发现我做错了什么。
使用 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 中做很多 expressions/conditions。

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

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
"

angularjs - ng-if 多个条件

angularjs - ng-if Multiple Conditions

javascript

angular-ng-if

赋值运算符与相等运算符

运算符优先级和结合性

将逻辑移至控制器