AngularJS ng-if具有多个条件


151

我想知道是否可能有这样的事情:

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

知道项目是通过请求接收的JSON容器,所以这就是为什么我使用键值方法。

谢谢

我之所以问是因为我尝试使用Google进行谷歌搜索,但是我唯一能得到的结果是ng-switch,但是我必须使用ng-if


3
在JavaScript中,or运算符为||
JB Nizet

Answers:


194

你当然可以。就像是:

的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'];

演示小提琴


如果我有20个输入字段,并且仅在所有字段均已填写的情况下才必须启用提交按钮。在这种情况下,我必须包括很多条件。这有点令人困惑。还有其他可行的解决方案吗?
Mr_Perfect '16

@CharanCherry看看角度形式验证。这样,您可以设置所有ng-required所需的字段,并检查表单有效性,例如在Submit按钮上使用ng-disabled表达式。CFR fdietz.github.io/recipes-with-angular-js/using-forms/...
壁虎IT

76

或运算符:

<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 >。
jmlopez 2015年

如果我们必须在html中使用复合语句来进行有角度的工作,我宁愿将复合语句放入附加到作用域的函数中,从而从html部分中删除该逻辑。
jmlopez 2015年

HTML5在编写时并未考虑到Angular。取而代之的是,谷歌的才华横溢的人写了Angular来-利用规范,因此用“&”编写Angular Expression非常正常。当然,我不想在View中放置业务规则,就像在asp.net MVC中执行Razor View页面时一样,但是我的回答完全在所问问题的范围内。
汤姆·斯蒂克

1
汤姆,您的回答没有错,我也写了您所显示的复合语句,因为我很懒(或者很着急),而且有效。但是那时我总是记得关于逃跑的规则&。这就是我偶然发现您答案的原因。我只是想将这些链接放在那里,以使人们了解HTML规范,就像您说的那样:“ HTML5并不是在考虑Angular的情况下编写的”。
jmlopez 2015年

1

如果两种情况都比工作正确,那么您也可以尝试使用&&来强制性使用条件

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

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

0

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";
}
}

0

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";
}
}

您能将您的答案合并为一个,然后删除另一个吗?
汤姆M,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.