Menu
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?
748
ng-if is better in this regard. Using it in place of ng-show will prevent the heavy content from being rendered in the first place if the expression is false. However, its strength is also its weakness, because if the user hides the chart and then shows it again, the content is rendered from scratch each time.
You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.
The difference is that ng-if removes elements from the DOM. If there are large parts of the code that will not be shown, then ng-if is the way to go. ng-show will only hide the elements but will keep all the handlers.
Directives that Create Scopes In most cases, directives and scopes interact but do not create new instances of scope. However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
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> This one is noteworthy as well
<div ng-repeat="post in posts" ng-if="post.type=='article'"> <h1>{{post.title}}</h1> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
