AngularJS 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 IfcurrentUser不是未定义的

<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;
    // 确定结果的布尔值的代码 
    return result;
};

作为任何Angular表达式，函数都可以接受任何类型的变量。