我想知道是否可能有这样的事情:
div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
<!-- SOME CONTENT -->
</div>
知道项目是通过请求接收的JSON容器,所以这就是为什么我使用键值方法。
谢谢
我之所以问是因为我尝试使用Google进行谷歌搜索,但是我唯一能得到的结果是ng-switch
,但是我必须使用ng-if
。
我想知道是否可能有这样的事情:
div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
<!-- SOME CONTENT -->
</div>
知道项目是通过请求接收的JSON容器,所以这就是为什么我使用键值方法。
谢谢
我之所以问是因为我尝试使用Google进行谷歌搜索,但是我唯一能得到的结果是ng-switch
,但是我必须使用ng-if
。
Answers:
你当然可以。就像是:
的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'];
演示小提琴
或运算符:
<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规范,就像您说的那样:“ HTML5并不是在考虑Angular的情况下编写的”。
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";
}
}
||
。