ngIf

ng-if 類似於指令 ng-show 但插入或移除從 DOM 元素而不是簡單地隱藏它。Angular 1.1.5 引入了 ng-If 指令。你可以使用 1.1.5 版本以上的 ng-if 指令。這很有用，因為 Angular 不會處理已移除的 ng-if 中的元素的摘要，從而減少了 Angular 的工作量，尤其是對於複雜的資料繫結。

與 ng-show 不同，ng-if 指令建立一個使用原型繼承的子範圍。這意味著在子範圍上設定原始值將不適用於父範圍。要在父作用域上設定基元，必須使用子作用域上的 $parent 屬性。

JavaScript

angular.module('MyApp', []);

angular.module('MyApp').controller('myController', ['$scope', '$window', function myController($scope, $window) {
    $scope.currentUser= $window.localStorage.getItem('userName');
}]);

檢視

<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 如果 currentUser 不是未定義的

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <!-- ng-if: !currentUser -->
</div>

DOM 如果 currentUser 未定義

<div ng-controller="myController">
    <!-- ng-if: currentUser -->
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

工作例項

功能承諾

ngIf 指令也接受函式，邏輯上要求返回 true 或 false。

<div ng-if="myFunction()">
    <span>Span text</span>
</div>

僅當函式返回 true 時才會顯示範圍文字。

$scope.myFunction = function() {
    var result = false;
    // Code to determine the boolean value of result 
    return result;
};

與任何 Angular 表示式一樣，該函式接受任何型別的變數。