AngularJS ng-model in ng-if Tutorial Image

AngularJS ng-model in ng-if Tutorial

Table Of Contents

a quick tip for those trying to get the ng-model directive working in your angularjs application within ng-if.

ng-if Child Scopes

If you are wanting to use an ng-model scope within an ng-if then you'll have to access that scope using $parent

Our html page will look something like so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<html ng-app="testApp">
<head>
    <title>AngularJS ng-if child scopes example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="testController">
    
    <div ng-if="isFalse">
        {{$parent.name}}
    </div>
    
    <p>{{name}}</p>
    
    <div ng-if="isTrue">
        <p>{{$parent.name}}</p>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

And our controller looks something like this:

1
2
3
4
5
6
7
8
9
var testApp = angular.module('testApp', []);
testApp.controller('testController' , function ($scope) {
    
    $scope.isTrue = false;
    
    $scope.name = "Elliot";
    
});
Was This Post Helpful?
Submit a PR: Edit on Github