CODEWITHSUNDEEP
javascriptangularjs
Laurynas
Laurynas

Reputation: 1032

AngularJS ng-if inside ng-repeat does not work

Here is my code:

<body  ng-controller="QueryCntl">

<div>
    <h1> Target:{{target}}</h1>         
</div>

<div ng-app="myApp" ng-controller="mytableCtrl">    

<div ng-include="'header.html'"></div>

<div id="menuList">
    <ul class="menuNav">
        <li class="menuList_Slide" ng-repeat="x in names">
            <div>               
                <a href="category.html?categoryid={{x.id}}">{{ x.category }}</a>
            </div>

            <div ng-if="{{target}} == {{x.id}}"> //Display subcategory if true
                <ul id="subCategories">
                    <li>
                        <a href="category.html?subcategoryid={{x.id}}">Childid should be displayed</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

</div>

<script>
    var app = angular.module('myApp', [], function($locationProvider) {
        $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
        $scope.target = $location.search()["categoryid"];       
    }
    app.controller('mytableCtrl', function($scope, $http) {
        $http.get("api/topCategories")
        .success(function(response) {$scope.names = response;});                        
    });

</script>

I want to display only 1 subcategory if {{target}} is equal to {{x.id}}. But for now it prints everything... {{target}} gets value from the url where ?categoryid=some_number and x.id is a value from DB. These values works fine in my code.

I would appreciate any help.

EDIT: ng-if="target == x.id" does not help.

Upvotes: 0

Views: 476

Answers (5)

Laurynas
Laurynas

Reputation: 1032

Problem solver: I inserted 

<base href="category.html">

in head tags and deleted bad script source.

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

ngIf doesn't need to use {{}} - it's already an Angular expression:

div ng-if="target == x.id"

Upvotes: 1

dfsq
dfsq

Reputation: 193261

ngIf directive expects an expression, so you don't need interpolation tags:

<div ng-if="target == x.id"> //Display subcategory if true
    <ul id="subCategories">
        <li>
            <a href="category.html?subcategoryid={{x.id}}">Childid should be displayed</a>
        </li>
    </ul>
</div>

And one more thing: you are not initializing $scope.target because corresponding controller is outside of the ng-app. Remove ng-controller="QueryCntl" and add target initialization into mytabeCtrl:

app.controller('mytableCtrl', function($scope, $http) {
    $scope.target = $location.search()["categoryid"];
    $http.get("api/topCategories")
    .success(function(response) {$scope.names = response;});                        
});

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72857

Replace:

<div ng-if="{{target}} == {{x.id}}">

With:

<div ng-if="target == x.id">

The ng-if attribute should contain plain JavaScript, instead of those interpolation tags ({{}}).

This holds true for all ng- attributes.

Upvotes: 0

sdgluck
sdgluck

Reputation: 27237

You don't need to interpolate properties within the ng-if directive's conditional as Angular evaluates the complete expression against the scope already. Try this:

ng-if="target == x.id"

Upvotes: 0

Related Questions