Unable to use ng-if with ng-repeat

Question

I was tried to use ng-if inside ng-repeat but it seems ng-if is not working properly.

I referred couple of forum links in StackOverflow but it doesn't help me.

I'm 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"}
          ];

});

As per the first condition, the first line should not get displayed (Below find the screenshot for more reference), however the line is getting displayed.

the reference link : Using ng-if inside ng-repeat?

Ng-If

Now i added the controller in the div as advised, however i'm facing the same issue

Below i have given the screenshot for reference. Kindly help me how to solve this issue and please let me know in case of further clarifications.

New screenshot with controller

Below provided screenshot on the working model used angular 1.3 version. If we use angular 1.0.2 the nf-if will not work properly (below provided the screenshot)

Working model screenshot

Screen shot for angular version 1.0.2

enter image description here

Take care: `ngIf` creates its proper scope. https://groups.google.com/forum/#!msg/angular/kPRzdcrIzNw/cNaJdguCNeYJ — Mik378, May 01 '14 at 18:09
@Mik378 No I have not tried with ng-show but how to use ng-if in this case. — Arun, May 01 '14 at 18:18
If it works with `ng-show`, your issue surely provides from the particularity of `ng-if`, that doesn't share the current scope but extends it. If it does not work with `ng-show`, then your context is the cause. @j.wittwer points out a very potential cause (context cause ;)) — Mik378, May 01 '14 at 18:19

score 4 · Accepted Answer · answered May 01 '14 at 18:18

I'm not having issues with this working. Tweaked your code to fit into a 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: reference angular 1.3.0 here: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js

sorry i don't understand how it works for you. In my earlier post of the code I missed the controller after that i added the controller and i tried it, however i'm facing the same issue. Attached the screenshot for reference. kindly let me know for more information. — Arun, May 03 '14 at 17:22

score 2 · Answer 2 · answered May 01 '14 at 18:20

2

You are missing ng-controller:

<body ng-controller="IfRepeatController">

answered May 01 '14 at 18:20

j.wittwer

9,497
3
30
32

as advised i added the controller but still i'm facing the same issue. In the above post i have attached the screenshot for more reference. – Arun May 03 '14 at 17:17
sorry i added the wrong module name it works fine attached the screenshot for reference – Arun May 03 '14 at 17:57

score 0 · Answer 3 · answered Sep 29 '14 at 20:59

0

I have a similar issue. I cannot get ng-if to work correctly. The only way to get it to work is to evaluate the ng-if to the not operator (ng-if="!variableValue"). Is this an AngularJS version issue?

answered Sep 29 '14 at 20:59

user1789573

515
2
8
23

score 0 · Answer 4 · edited Sep 30 '14 at 02:40

0

This in not AngularJs Version issue, If variableValue has boolean it will work fine.

Sample code like this:

$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

edited Sep 30 '14 at 02:40

Logan Wayne

6,001
16
31
49

answered Sep 30 '14 at 01:43

Karthik

51
3
8

Unable to use ng-if with ng-repeat

4 Answers4

Linked