how to use custom data into ng-if ? (angularJS)

Question

I have a json structure and from that, i am creating a form using controllers and routes. The json is :

[{
    "name": "home",
    "section": "link"
},
{
    "name": "about",
    "section": "link"
},
{
    "name": "Style",
    "section": "link"
},{
    "name": "name",
    "type": "text",
    "section": "home"
},
{
    "name": "age",
    "type": "text",
    "section": "home"
}]

And the js code is :

var myApp = angular.module("myApp", ['ngRoute']);

myApp.controller("linkCtrl", function($scope, dataService, $route) {
    dataService.getData('json/link.json', function(data){
      $scope.links = data.data;
      $scope.message = "home";    
    });
});

and my HTML code is :

<h4>{{message}}</h4>
<div ng-repeat="item in links">
    <div ng-if="item.section == 'home'">
        <div ng-switch="item.type">
            <div ng-switch-when="text">
                <input type="text" id={{item.name}} />
            </div>
            <div ng-switch-when="button">
                <button id={{item.name}}>{{item.name}}</button>
            </div>
            <div ng-switch-when="checkbox">
                <input type="checkbox" id={{item.name}} />
            </div>
        </div>
    </div>

This code is working fine. If i use ng-if="item.section == {{message}}" or ng-if="item.section == '{{message}}'", its not working, but outside ng-if, if i put {{message}}, it shows "home".

Why it is not working inside ng-if statement. The basic syntax are mentioned in my code itself. I just posted the main code of my function

If the code works inside the ng-if, then it will be easy to use one template for my pages.

So, is there any way to make it work?

Remove the the quotes and brackets. ie. item.section == message — Johan
– Johan, Commented Sep 4, 2015 at 9:25

Vineet · Accepted Answer · 2015-09-04 09:25:46Z

2

Use

ng-if="item.section == message"

instead

ng-if="item.section == {{message}}"

answered Sep 4, 2015 at 9:25

Vineet

4,7153 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ste2425 Over a year ago

You are correct but thought i best expand on why that is the case. Angular will look through your markup for the double curly braces and inject into them (replacing the braces also) the interpolated value of your model. However for angular directives, ng-show ng-if etc you want the reference to the model property so that Angular can perform its data-binding upon it and dynamically change the value when your model changes.

kunsingh · Accepted Answer · 2015-09-04 10:00:56Z

0

You will have to use it like ng-if="item.section === message"

See ng-if is a directive and is already in scope. ng-if prototypically inheriting scope from its parent. ng-if expects expression which you have give as "item.section === message" therefore no need to do any nested interpolation, message will be evaluated as it is in parent scope.

answered Sep 4, 2015 at 10:00

kunsingh

2542 silver badges7 bronze badges

Collectives™ on Stack Overflow

how to use custom data into ng-if ? (angularJS)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related