161

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.

Animay
  • 602
  • 1
  • 7
  • 18
TurnsCoffeeIntoScripts
  • 3,868
  • 8
  • 41
  • 46

5 Answers5

208

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

Edric
  • 24,639
  • 13
  • 81
  • 91
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
  • If I have 20 input fields and I have to enable submit button only if all fields are filled. In this case, I have to include so many conditions. This is little bit confusing. Is there any other feasible solution? – Mr_Perfect Dec 02 '16 at 05:14
  • @CharanCherry Take a look into angular form validation. That way you can set all desired fields ng-required and check for form validity in for example an ng-disabled expression on the submit button. cfr http://fdietz.github.io/recipes-with-angular-js/using-forms/only-enabling-submit-button-if-the-form-is-valid.html – Gecko Dec 04 '16 at 19:58
80

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>
Tom Stickel
  • 19,633
  • 6
  • 111
  • 113
  • Ok, so all browsers seem to recognize the `&` as a valid character. But it should be mentioned that using `&` in an attribute is not valid html. See , 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: . – jmlopez Nov 04 '15 at 00:40
  • If we must use compound statements in html to make angular work I would prefer to put the compound statements into a function attached to the scope, thus removing that logic away from the html section. – jmlopez Nov 04 '15 at 00:41
  • HTML5 was not written with Angular in mind. Instead the brilliant guys at google wrote Angular to instead - take advantage of the spec and thus writing an Angular Expression with "&" is very normal. Sure, I prefer to not put business rules in the View, just like when I do Razor View pages in asp.net MVC , but my answer is completely within the context of the question being asked. – Tom Stickel Nov 04 '15 at 01:08
  • 1
    There is nothing wrong with your answer Tom, I also write compound statements like the ones you show because I'm lazy (or in a hurry), and it works. But then I always remember this rule about escaping `&`. 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". – jmlopez Nov 04 '15 at 15:29
1

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>
Rizwan
  • 3,741
  • 2
  • 25
  • 22
0

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";
}
}
Narasimhamurthy G N
  • 145
  • 1
  • 12
0

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";
}
}
Narasimhamurthy G N
  • 145
  • 1
  • 12