Angular ngIf
ng-if is a directive similar to ng-show but inserts or removes the element from the DOM instead of simply hiding it. Angular 1.1.5 introduced ng-If directive. You can Use ng-if directive above 1.1.5 versions. This is useful because Angular will not process digests for elements inside a removed ng-if reducing the workload of Angular especially for complex data bindings.
Unlike ng-show, the ng-if directive creates a child scope which uses prototypal inheritance. This means that setting a primitive value on the child scope will not apply to the parent. To set a primitive on the parent scope the $parent property on the child scope will have to be used.
JavaScript
angular.module('MyApp', []);
angular.module('MyApp').controller('myController', ['$scope', '$window', function
myController($scope, $window) {
$scope.currentUser= $window.localStorage.getItem('userName');
GoalKicker.com – AngularJS Notes for Professionals 20
}]);View
<div ng-controller="myController">
<div ng-if="currentUser">
Hello, {{currentUser}}
</div>
<div ng-if="!currentUser">
<a href="/login">Log In</a>
<a href="/register">Register</a>
</div>
</div>DOM If currentUser Is Not Undefined
<div ng-controller="myController">
<div ng-if="currentUser">
Hello, {{currentUser}}
</div>
<!-- ng-if: !currentUser -->
</div>DOM If currentUser Is Undefined
<div ng-controller="myController">
<!-- ng-if: currentUser -->
<div ng-if="!currentUser">
<a href="/login">Log In</a>
<a href="/register">Register</a>
</div>
</div>Function Promise
The ngIf directive accepts functions as well, which logically require to return true or false.
<div ng-if="myFunction()">
<span>Span text</span>
</div>The span text will only appear if the function returns true.
$scope.myFunction = function() {
var result = false;
// Code to determine the boolean value of result
return result;
};As any Angular expression the function accepts any kind of variables.