AngularJS ng-if 具有多种条件

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

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

知道项目是通过请求接收的 JSON 容器，所以这就是我使用 key，value 方法的原因。

谢谢

我这么问是因为我试过在谷歌上搜索它，但是我能得到的唯一结果是使用 ng-switch，但是我必须使用 ng-if。

597398 次浏览
小开
最佳答案

你当然可以，比如:

超文本标示语言

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

演示 小提琴

小开

操作员:

<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 操作符 (对于那些遇到堆栈溢出问题的人，应该查找 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>
小开

如果这两个条件都比工作真实，你也可以尝试 & & 强制性条件

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


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

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

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

提交答案