ng-if指令

概述

在Angular JS中,可以使用ng-if指令来控制元素是否存在。

实现细节

ng-if标签通过监控绑定的数据,在数据发生变化时,如果为true就存在,为false就不存在。

//显示
$animate.enter(clone, $element.parent(), $element);

//影藏
$animate.leave(previousElements).then(function() {
                previousElements = null;
            });

从代码可以看出,在元素添加和删除是动过$animate完成的,这说明添加和删除的过程可以动画实现。
另外:ng-if不仅仅可以绑定数据模型,还可以绑定表达式。ng-if具有高优先级(600),同时还具有terminal属性为true,所以在具有ng-if指令的元素上,很多其它指令是无效的。

示例代码

<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
    <title>Test</title>
</head>
<body ng-controller="testCtrl">
<div>
    <input type="button" value="click" ng-click="test()">
</div>
<div>
    <div ng-if ="data" >test1</div>
    <div ng-if ="data >3" >test2</div>
</div>
</body>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
    angular.module("app",[]).controller("testCtrl",["$scope",function($scope){
        $scope.data = 0;
        $scope.test = function(){
            $scope.data += 1;
            if($scope.data > 5){
                $scope.data = 0;
            }
        }
    }]);
</script>
</html>

这段代码实现的功能为:当点击按钮,$scope的data值就会自增1,当data大于5时就会还原为0。test1在data不为0时就显示,test2在data大于3时显示。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • ng-if指令用于验证 ng-if=“函数或表达式” 当表达式返回布尔true时创建元素,返回false时删除该元...
    报告老师阅读 1,174评论 0 0
  • 基础ng属性指令 布尔属性 布尔属性代表一个true或false值。当这个属性出现时,这个属性的值就是true(无...
    oWSQo阅读 1,269评论 0 0
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,679评论 0 3
  • 萧伟的祖父姓曾,名弓北,与萧伟并不同姓。至于其间原因,白叟从未向萧伟提起过,而萧伟也从没敢问过。 曾老逝世时是九十...
    道涵容阅读 352评论 0 2