directive ngHide

ngHide指令根据提供给ngHide属性的表达式显示或隐藏给定的HTML元素。

通过删除或者添加到元素上的CSS类来显示或隐藏元素。

用法：

index.html
<html ng-app="extendApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .check-element {
            border: 1px solid black;
            opacity: 1;
            padding: 10px;
        }
    </style>
    <script src="framework/angular.js"></script>
    <script src="js/aaa.js"></script>
</head>
<body ng-controller="extendController">
Hide: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br />
<div class="check-element" ng-hide="checked">
    I hide when your checkbox is checked.
</div>
<div>
    aaaa
</div>
</body>
</html>

script.js
angular.module("extendApp",[])
    .controller("extendController",function ($scope) {
        $scope.checked = false;
    });

效果：

可以看出当隐藏的时候连同位置也被删除

posted @ 2017-06-14 15:04  发福大叔  阅读(131)  评论(0)  编辑  收藏  举报