Using ng-if as a switch inside ng-repeat?
Solution 1
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>
Solution 2
This one is noteworthy as well
<div ng-repeat="post in posts" ng-if="post.type=='article'">
<h1>{{post.title}}</h1>
</div>
Solution 3
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
Anil Sharma
A tech geek who loves exploring web . Love to explore new modern evolving technologies and dig into Linux administration . Have working experience on below stacks : AngularJS | Material | Laravel | Jquery | NodeJS | Ionic | Cordova | MongoDB | Mysql | Html5 | CSS3 | Development tools (GULP | BOWER) Innovation : key to Success
Updated on August 06, 2020Comments
-
Anil Sharma over 3 years
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?
-
Anil Sharma about 10 yearsThis 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?
-
Eugene P. about 10 yearsunfortunatelly, 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
-
Anil Sharma about 10 yearsAlright thanks for help. , definitely i would give a try to this method
-
Stephan Rauh about 10 yearsJust 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.
-
Arun almost 10 yearsIs 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
-
mcranston18 over 9 years@EugeneP Will angular build the template in the <ng-include /> once and then use it for the ng-repeat? Or will it fetch the new template from ng-include each time?
-
mcranston18 over 9 years@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
-
abdul rashid almost 9 years
ng-if
inng-repeat
is Helpful -
Stilltorik almost 8 yearsThis doesn't work at least for angular 1.2: github.com/angular/angular.js/issues/3584.
-
Yasin Okumuş about 7 yearsThis doesn't work for me either. It still shows even with
ng-if='false'
andng-show='false'
-
ScrapCode about 7 yearsThis helped me get rid of empty
div
s.