AngularJS ng-if 具有多个条件答案

【问题标题】：AngularJS ng-if with multiple conditionsAngularJS ng-if 具有多个条件
【发布时间】：2013-12-16 18:52:49
【问题描述】：

我想知道是否有可能有这样的东西：

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

知道 items 是通过请求接收的 JSON 容器，这就是我使用键值方法的原因。

谢谢

我之所以问是因为我尝试过用谷歌搜索它，但我能得到的唯一结果是ng-switch，但我必须使用ng-if。

【问题讨论】：

在 JavaScript 中，or 运算符是||。

标签： angularjs

【解决方案1】：

当然可以。比如：

HTML

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

演示Fiddle

【讨论】：

如果我有 20 个输入字段，并且只有在所有字段都填满时才必须启用提交按钮。在这种情况下，我必须包括这么多条件。这有点令人困惑。有没有其他可行的解决方案？
@CharanCherry 看看角度表单验证。这样，您可以设置所有需要的字段 ng-required 并检查表单的有效性，例如提交按钮上的 ng-disabled 表达式。 cfr fdietz.github.io/recipes-with-angular-js/using-forms/…

【解决方案2】：

OR 运算符：

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

尽管阅读起来很简单，但我希望作为开发人员，您使用的名称比 'a' 'k' 'b' 等更好。

例如：

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

另一个 OR 示例

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

AND 运算符（对于那些偶然发现这个 stackoverflow 答案的人正在寻找 AND 而不是 OR 条件）

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

【讨论】：

好的，所有浏览器似乎都将& 识别为有效字符。但需要指出的是，在属性中使用& 是无效的html。请参阅 html.spec.whatwg.org/multipage/syntax.html#syntax-attributes>，更具体地说：“属性值是文本和字符引用的混合，除了文本不能包含不明确的 & 符号的附加限制。”另请参阅此答案：stackoverflow.com/a/5320217/788553>.
如果我们必须在 html 中使用复合语句来进行角度工作，我更愿意将复合语句放入附加到作用域的函数中，从而从 html 部分中删除该逻辑。
HTML5 在编写时并未考虑到 Angular。相反，谷歌的聪明人写了 Angular 来代替——利用规范，因此用“&”写一个 Angular 表达式是很正常的。当然，我更喜欢不在视图中放置业务规则，就像我在 asp.net MVC 中执行 Razor View 页面时一样，但我的回答完全在所问问题的上下文中。
你的回答没有错，汤姆，我也写了像你展示的那样的复合语句，因为我很懒（或匆忙），而且它有效。但后来我一直记得这条关于转义& 的规则。这就是我偶然发现你的答案的原因。我只是想把这些链接放在那里让人们了解 HTML 规范，就像你说的，“HTML5 不是用 Angular 编写的”。

【解决方案3】：

如果两个条件都为真而不是工作，您也可以尝试使用 && 强制条件

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>

【讨论】：

【解决方案4】：

JavaScript 代码

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

【讨论】：

【解决方案5】：

HTML 代码

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

JavaScript 代码

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

【讨论】：

您能否将您的答案合并为一个并删除另一个？