开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

[Angularjs]ng-show和ng-hide

简介:
+关注继续查看

写在前面

上篇文章介绍了ng-select和ng-options指令的使用,这篇文章继续指令的学习,本篇文章讲学习ng-show和ng-hide指令。

系列文章

[Angularjs]ng-select和ng-options

ng-show和ng-hide

ng-Show 和ng-Hide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时,更方便的操作元素的显示与隐藏,而不必使用css或者js操作元素的显示与隐藏,这些交给angularjs来实现就可以了。我们只需要做的就是为ng-show和ng-hide指定显示或者隐藏的条件就可以了。

一个例子

控制元素的显示与隐藏,可以通过三种方式来实现,分别是:布尔值,表达式,函数。

布尔值

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title>show-hide</title>
    <script src="JS/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('showHideController', function ($scope) {
            $scope.isShow = true;
        });
    </script>
    <style>
        .div {
            border: 1px solid #0094ff;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div ng-controller="showHideController">
        <div ng-show="isShow" class="div">this is a div which is show</div>
        <div ng-show="!isShow" class="div">this is a div which is hide</div>
        <button ng-click="!isShow">按钮</button>
    </div>
</body>
</html>
复制代码

上面的例子,为ng-show指定了isShow的变量,通过该值是否为true,控制div的显示与隐藏。

函数

当然你可以通过,添加一个按钮,通过单击按钮,动态的修改isShow的值。可以这样:

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title>show-hide</title>
    <script src="JS/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('showHideController', function ($scope) {
            $scope.isShow = true;
            $scope.showorhide = function () {
                $scope.isShow = !$scope.isShow;
            }
        });

    </script>
    <style>
        .div {
            border: 1px solid #0094ff;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div ng-controller="showHideController">
        <div ng-show="isShow" class="div">this is a div which is show</div>
        <!--<div ng-show="!isShow" class="div">this is a div which is hide</div>-->
        <button ng-click="showorhide()">按钮</button>
    </div>
</body>
</html>
复制代码

通过单击按钮,就会切换div的显示与隐藏,如果你监视一下dom,你会发现ng-show的实现也是通过,为元素addClass或者removeClass实现的。

表达式

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title>show-hide</title>
    <script src="JS/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('showHideController', function ($scope) {
            $scope.isShow = true;
            $scope.showorhide = function () {
                $scope.isShow = !$scope.isShow;
                $scope.animal = '';
            }
        });

    </script>
    <style>
        .div {
            border: 1px solid #0094ff;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div ng-controller="showHideController">
        <div ng-show="isShow" class="div">this is a div which is show</div>
        <!--<div ng-show="!isShow" class="div">this is a div which is hide</div>-->
        <button ng-click="showorhide()">按钮</button>
        <h1>isShow={{isShow}}</h1>
        <input type="text" name="name" value="" ng-model="animal" placeholder="请输入一种动物" />
        <!-- 输入的内容是否为dog,为dog的时候显示,否则隐藏 -->
        <div ng-show="animal=='dog'">this is a dog</div>
    </div>
</body>
</html>
复制代码

 

总结

上面列举的三个例子,分别从为ng-show或者ng-hide设置布尔值表达式, 以及 函数,实现的元素显示和隐藏功能 但这三种模式将能应用到更多的场景。其实归结到底的话算是一种:控制一个布尔值来改变元素的显示与隐藏的。关于ng-hide的用法与ng-show的用法类似。这里不再赘述。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4620150.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
angular28-ng-class颜色切换
angular28-ng-class颜色切换
19 0
五小步让VS Code支持AngularJS智能提示
五小步让VS Code支持AngularJS智能提示
144 0
AngularJS-图
这张图是在AngularJS实战 系列视频里面截图的,看完大漠的课程,收获颇丰。同时,自己加油去读读https://angularjs.org/ 官网的手册,以及像大漠等牛人一样,研究下源码… 有一句话说得好,无论什么时候开始,重要的是开始之后就不要停止! “When it comes to coding no one is the best and i
1274 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载