使用ng-if在ng-repeat中?
我正在处理Angular应用程序。 我试图用ng-if和在ng-repeat内部切换,但是没有成功。 我有像这样的数据:
**[{"_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 =上面提到的数据
和我的Html一样:
<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>
我怎么能在Angular中实现这个东西?
尝试用引号括hoot
strings
( hoot
, story
, article
):
<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>
这也是值得注意的
<div ng-repeat="post in posts" ng-if="post.type=='article'"> <h1>{{post.title}}</h1> </div>
我会build议移动所有的模板来分开文件,不要在重复里面做spagetti
看看这里:
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'; } });