Unable to use ng-if with ng-repeat

StackOverflow https://stackoverflow.com/questions/23413718

  •  13-07-2023
  •  | 
  •  

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

Était-ce utile?

La solution

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

Autres conseils

You are missing ng-controller:

<body ng-controller="IfRepeatController">

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?

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
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top