Geek Answers Handbook

Cannot use ng-if with ng-repeat

I tried using ng-if inside ng-repeat, but it seems that ng-if is not working properly.

I mentioned a couple of forum links on StackOverflow, but that doesn't help me.

I am using angular version 1.3.0

HTML

<!DOCTYPE html> <html ng-app="myModule"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <script src="/js/lib/angular-1.3.0/angular.js"></script> <script src="/js/lib/controllers/ifRepeatController.js"></script> </head> <body> <div ng-repeat = "data in comments"> <div ng-if="data.type == 'hootsslllll' "> //differnt template with hoot data </div> <div ng-if="data.type == 'story' "> //differnt template with story data </div> <div ng-if="data.type == 'article' "> //differnt template with article data </div> </div> </body> </html>

controller

 var myIfRepeat = angular.module('myIfRepeat',[]); myIfRepeat.controller('IfRepeatController', function ($scope,$http) { $scope.comments = [ {"_id":"1", "post_id":"1", "user_id":"UserId1", "type":"hoot"}, {"_id":"2", "post_id":"2", "user_id":"UserId2", "type":"story"}, {"_id":"3", "post_id":"3", "user_id":"UserId3", "type":"article"} ]; });

According to the first condition, the first line should not be displayed (find the screenshot below for additional reference), however, the line is displayed.

reference: Using ng-if inside ng-repeat?

Ng-if

Now I have added the controller to the div as recommended, however I ran into the same problem

Below I gave a screenshot for reference. Please help me on how to solve this problem, and please let me know in case of further clarification.

New screenshot with controller

Below is a screenshot of the working model used in angular 1.3. If we use angular 1.0.2, nf-if will not work properly (below screenshot)

Working model screenshot

Screenshot for angular version 1.0.2

enter image description here

+1
angularjs angular-ng-if
source share
4 answers

I have no problem with this job. Change your code to fit in fiddle

 <div ng-app ng-controller="IfRepeatController"> <div ng-repeat="data in comments"> <div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div> <div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div> <div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div> </div> </div> function IfRepeatController($scope) { $scope.comments = [{ "_id": "1", "post_id": "1", "user_id": "UserId1", "type": "hoot" }, { "_id": "2", "post_id": "2", "user_id": "UserId2", "type": "story" }, { "_id": "3", "post_id": "3", "user_id": "UserId3", "type": "article" }]; }

Note: the angular 1.3.0 link is here: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js

+4
source share

You are missing ng-controller :

 <body ng-controller="IfRepeatController">
+2
source share

I have a similar problem. I can not get ng - if it works correctly. The only way to make it work is to evaluate ng-if on a non-operator (ng-if = "! VariableValue"). Is this a problem with the version of AngularJS?

0
source share

This is not an AngularJs version issue, if variableValue is boolean, it will work fine.

Code example:

 $scope.variableValue = true; in Controller "<"div ng-if="!variableValue" ">"Don't show content"<"/div">"// This DIV doesn't show the content "<"div ng-if="variableValue" ">"show content"<"/div">" // This DIV will show the content
0
source share

More articles:


All Articles