ng-if 、ng-show、ng-switch 控制是否显示

最新推荐文章于 2023-04-05 08:48:52 发布

胖鹅68

最新推荐文章于 2023-04-05 08:48:52 发布

阅读量4.2k

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/52683382

版权

文章参考

http://www.java123.net/993384.html

http://www.runoob.com/angularjs/ng-ng-switch.html

ng-show

ng-show接收的一个bool值，当为true的时候就会被触发去展示DOM节点。当ng-show的值为false的时候，在DOM节点上添加了一个ng-hide的一个类，这个类的表达式就是“display：none”。DOM load的时候ng-show里面的所有节点都会被加载。也就是说，ng-show仅仅是影藏和显示了DOM节点。也就意味如果油太多的ng-show指令，即使他们不显示，但他们所在的DOM节点还是会被渲染的。

ng-if

ng-if也接收的一个bool值，当它的值为false的时候，它所控制的节点并没有被创建或者说之前的DOM节点会被销毁掉，哪怕这个节点里面包含了很多ng的绑定都不会去执行。所以，我们在项目开发中，如果没有必要一次性加载完的dom就可以用ng-if来阻止ng事件发生，从而也就加快了dom的加载速度。特别是在repeat的时候，每条数据又包含了复杂的数据结构的时候效果特别明显。当它的值为true的时候，就会去创建DOM节点。

例子

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <!--<script src="public/js/jquery.js"></script>-->
    <script src="../public/ionic/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../public/ionic/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">

<input type="checkbox" ng-model="checked">点击试试

<div ng-if="checked">content</div>

<hr>
--------------------- ng-if ---------------------------
<div ng-if="isBoy">name is isBoy </div>
<div ng-if="name=='huangbiao'">name is huangbiao </div>
<div ng-if="age==18">age is 18 </div>
<hr>

<hr>
--------------------- ng-show ---------------------------
<div ng-show="isBoy">name is isBoy </div>
<div ng-show="name=='huangbiao'">name is huangbiao </div>
<div ng-show="age==18">age is 18 </div>
<hr>

<hr>
--------------------- ng-switch ---------------------------
<br>
<select ng-model="myVar">
    <option value="default">default</option>
    <option value="runoob">runoob</option>
    <option value="google">google</option>
    <option value="taobao">taobao</option>
</select>
<br>
<div ng-switch="myVar">
    <div ng-switch-when="runoob">
        <h1>菜鸟教程</h1>
        <p>欢迎访问菜鸟教程</p>
    </div>
    <div ng-switch-when="google">
        <h1>Google</h1>
        <p>欢迎访问Google</p>
    </div>
    <div ng-switch-when="taobao">
        <h1>淘宝</h1>
        <p>欢迎访问淘宝</p>
    </div>
    <div ng-switch-default>
        <h1>切换</h1>
        <p>选择不同选项显示对应的值。</p>
    </div>
</div>
<hr>


</body>
</html>

<script>
    angular.module('myApp', ['ionic'])
            .controller('myCtrl', function($scope,$ionicModal) {

                $scope.isBoy = true;
                $scope.name = "huangbiao";
                $scope.age = 18;

//                $scope.isBoy = false;
//                $scope.name = "huangbiao1";
//                $scope.age = 189;

                $scope.myVar = "default"

            });

</script>