Using ng-if as a switch inside ng-repeat?

Question

I am working on Angular app. I tried to use ng-if and switch inside ng-repeat but didn't succeed. I have data like:

   **[{"_id":"52fb84fac6b93c152d8b4569",
       "post_id":"52fb84fac6b93c152d8b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"hoot",},  
      {"_id":"52fb798cc6b93c74298b4568",
       "post_id":"52fb798cc6b93c74298b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"story",},        
      {"_id":"52fb7977c6b93c5c2c8b456b",
       "post_id":"52fb7977c6b93c5c2c8b456a",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"article",},**

$scope.comments = data mentioned above
and my Html like :

   <div ng-repeat = "data in comments">
      <div ng-if="hoot == data.type">
          //differnt template with hoot data
       </div>
      <div ng-if="story == data.type">
          //differnt template with story data
       </div>
       <div ng-if="article == data.type">
          //differnt template with article data
       </div> 
   </div>

How can I achieve this thing in Angular?

score 90 · Accepted Answer · edited Sep 17 '15 at 13:12

90

Try to surround strings (hoot, story, article) with quotes ':

<div ng-repeat = "data in comments">
    <div ng-if="data.type == 'hoot' ">
        //different template with hoot data
    </div>
    <div ng-if="data.type == 'story' ">
        //different template with story data
    </div>
    <div ng-if="data.type == 'article' ">
        //different template with article data
    </div> 
</div>

edited Sep 17 '15 at 13:12

Armand

23,463
20
90
119

answered Feb 13 '14 at 10:40

steo

4,586
2
33
64

8

Just to point out the difference (since I didn't see it immediately): the answer is to surround the Strings with quotes. Using them as direct literals won't work. – Stephan Rauh Apr 26 '14 at 10:29
1

Is this above solution got worked.... ??? i tried the same but it doesn't get worked :( please help how to work with ng-if to check with literals – Arun Apr 30 '14 at 09:24
This doesn't work for me either. It still shows even with `ng-if='false'` and `ng-show='false'` – Yasin Okumuş Mar 17 '17 at 13:49

Frankey · Answer 2 · 2015-05-08T21:53:14.410

85

This one is noteworthy as well

<div ng-repeat="post in posts" ng-if="post.type=='article'">
  <h1>{{post.title}}</h1>
</div>

edited May 08 '15 at 21:53

answered Jan 10 '15 at 20:19

Frankey

3,679
28
25

`ng-if` in `ng-repeat` is Helpful – abdul rashid May 09 '15 at 08:39
1

This doesn't work at least for angular 1.2: https://github.com/angular/angular.js/issues/3584. – Stilltorik May 04 '16 at 08:48
This helped me get rid of empty `div`s. – ScrapCode Mar 27 '17 at 07:04

score 12 · Answer 3 · answered Feb 13 '14 at 11:27

12

I will suggest move all templates to separate files, and don't do spagetti inside repeat

take a look here:

html:

<div ng-repeat = "data in comments">
    <div ng-include src="buildUrl(data.type)"></div>
 </div>

js:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {

  $scope.comments = [
    {"_id":"52fb84fac6b93c152d8b4569",
       "post_id":"52fb84fac6b93c152d8b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"hoot"},  
    {"_id":"52fb798cc6b93c74298b4568",
       "post_id":"52fb798cc6b93c74298b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"story"},        
    {"_id":"52fb7977c6b93c5c2c8b456b",
       "post_id":"52fb7977c6b93c5c2c8b456a",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"article"}
  ];

  $scope.buildUrl = function(type) {
    return type + '.html';
  }
});

http://plnkr.co/edit/HxnirSvMHNQ748M2WeRt?p=preview

answered Feb 13 '14 at 11:27

Eugene P.

2,645
19
23

This seems to be nice. I am building this with backend Laravel. I am just exploring Angularjs. Is this would be possible with laravel blade templating? if you have tried it with frameworks? – Anil Sharma Feb 13 '14 at 11:39
unfortunatelly, I'm not familiar with laravel. but,anyway, as long as it's angular code, angular will handle it in a sweet way for sure – Eugene P. Feb 13 '14 at 11:41
Alright thanks for help. , definitely i would give a try to this method – Anil Sharma Feb 13 '14 at 11:43
@EugeneP Will angular build the template in the once and then use it for the ng-repeat? Or will it fetch the new template from ng-include each time? – mcranston18 Sep 16 '14 at 19:32
1

@EugeneP I'm going to answer my own question (^) above for anyone else: ng-include's are cached by the browser so an ng-include inside an ng-repeat would be cached – mcranston18 Sep 16 '14 at 21:59

Using ng-if as a switch inside ng-repeat?

3 Answers3

Linked