Using ng-if inside ng-repeat?

问题:

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?

回答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> 

回答2:

This one is noteworthy as well

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

回答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

文章来源: Using ng-if inside ng-repeat?