Using ng-if as a switch inside ng-repeat?
AngularjsDomLaravel 4Angularjs Ng-RepeatAngularjs Ng-IfAngularjs Problem Overview
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?
Angularjs Solutions
Solution 1 - Angularjs
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 - Angularjs
This one is noteworthy as well
<div ng-repeat="post in posts" ng-if="post.type=='article'">
<h1>{{post.title}}</h1>
</div>
Solution 3 - Angularjs
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';
}
});