angularJS DOM操作相关指令

最新推荐文章于 2022-07-31 21:17:54 发布

outsiderlcy

最新推荐文章于 2022-07-31 21:17:54 发布

阅读量873

点赞数

分类专栏： angularJS 文章标签： angularjs dom

本文链接：https://blog.csdn.net/outsiderlcy/article/details/53054489

版权

angularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM操作相关指令

ng-show:针对元素的展现、隐藏，是通过CSS的display来实现的。参数true是展现，false是隐藏。隐藏时不保留该位置。
代码示例：

<div ng-show="true">bbbbbbbbb</div>

页面结果展示：
这里写图片描述

ng-hide：与ng-show的作用相反，true隐藏，false显示
ng-if：针对元素的操作，true显示，false隐藏。ng-if不是通过CSS样式来针对元素的操作，而是针对DOM节点，true是添加节点，false是删除节点。
代码示例：（通过绑定的数据来控制）

    <script>
    var m = angular.module('myApp',['ngSanitize']);//引入相应模块
    m.controller('Aaa',['$scope',function($scope){

        $scope.bBtn = true;

    }]);
    </script>

    <div ng-controller="Aaa">
        <input type="checkbox" ng-model="bBtn">
        <div ng-if="bBtn">bbbbbbbbb</div>
    </div>

页面结果展示：
这里写图片描述

这里写图片描述

ng-switch：有选择性的进行显示、隐藏
-on ：与ng-switch配合使用
-default：默认true的值，显示该值
-when：false时显示该值
代码示例：

<script>
    var m = angular.module('myApp',['ngSanitize']);//引入相应模块
    m.controller('Aaa',['$scope',function($scope){

        $scope.bBtn = true;

    }]);
    </script>

    <div ng-controller="Aaa">
        <input type="checkbox" ng-model="bBtn">
        <div ng-switch on="bBtn">
            <p ng-switch-default>默认的效果</p>
            <p ng-switch-when="false">切换的效果</p>
        </div>
    </div>

页面结果展示：
这里写图片描述

这里写图片描述

ng-open：与HTML5中的open属性相类似，用于只兼容的谷歌和safari的标签。true展开详细内容，false不展示。
代码示例：

    <script>
    var m = angular.module('myApp',['ngSanitize']);//引入相应模块
    m.controller('Aaa',['$scope',function($scope){

        $scope.bBtn = true;

    }]);
    </script>

    <div ng-controller="Aaa">
        <input type="checkbox" ng-model="bBtn">
        <details ng-open="bBtn">
            <summary>lalalala</summary>
            <p>kdsvbckunsdjnlknfuvbnkjdflknvsmlcdknfvlcknrejncjfnvfd</p>
        </details>
    </div>