I'd like to know if it's possible to have something like this:
div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
<!-- SOME CONTENT -->
</div>
Knowing that items is a JSON container received through a request, so that's why I'm using a key, value method.
Thanks
I'm asking because I've tried googling it, but the only result I could get were with ng-switch, but I have to use ng-if.
Sure you can. Something like:
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'];
Demo Fiddle
OR operator:
<div ng-repeat="k in items">
<div ng-if="k || 'a' or k == 'b'">
<!-- SOME CONTENT -->
</div>
</div>
Even though it is simple enough to read, I hope as a developer you are use better names than 'a' 'k' 'b' etc..
For Example:
<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>
Another OR example
<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>
AND operator (For those stumbling across this stackoverflow answer looking for an AND instead of OR condition)
<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>
& as a valid character. But it should be mentioned that using & in an attribute is not valid html. See <html.spec.whatwg.org/multipage/syntax.html#syntax-attributes>, more specifically: "Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand." See also this answer: <stackoverflow.com/a/5320217/788553>.
&. This is the reason I stumbled upon your answer. I just wanted to put those links there to make people aware of the HTML spec, like you said, "HTML5 was not written with Angular in mind".you can also try with && for mandatory constion if both condtion are true than work
//div ng-repeat="(k,v) in items"
<div ng-if="(k == 'a' && k == 'b')">
<!-- SOME CONTENT -->
</div>
JavaScript Code
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";
}
}
HTML code
<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 Code
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";
}
}
||.