前言
本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。
控制html元素显示和隐藏有n种方法:html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom,5行代码搞不定吧,而且毫无技术含量。
实例1
- <body>
- <div ng-controller="VisibleController">
- <p ng-show="visible">字符串1</p>
- <p ng-hide="visible">字符串2</p>
- <button ng-click="toggle()">切换</button>
- </div>
-
- <script src="../lib/angularjs/1.2.26/angular.min.js"></script>
- <script>
- function VisibleController($scope) {
- $scope.visible = false;
- $scope.toggle = function () {
- $scope.visible = !$scope.visible;
- }
- }
- </script>
- </body>
两个指令很简单,只是ng-show在true时显示,false时隐藏,而ng-hide效果相反。
对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样,Angular是通过修改数据模型的方式来驱动UI刷新,然后通过指令把变更反应到UI上。
ng-show和ng-hide这两条指令的功能是等价的,但是运行效果正好相反,我们都可以根据所传递的表达式来显示或隐藏元素。也就是说,ng-show在表达式为true时将会显示元素,为false时将会隐藏元素;而ng-hide则恰好相反。
工作原理
这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block来显示元素;设置为display:none来隐藏元素。
实例2
- <body ng-controller='ShowController'>
- <button ng-click="toggleMenu()">Toggle Menu</button>
- <ul ng-show='menuState.show'>
- <li>Stun</li>
- <li>Disintegrate</li>
- <li>Erase from history</li>
- </ul>
-
- <script src="lib/angular/angular.js"></script>
- <script>
- var myApp=angular.module('myApp',[]) myApp.controller('ShowController',function($scope) {$scope.menuState={show: false},$scope.toggleMenu=function() {$scope.menuState.show=!$scope.menuState.show;}});
- </script>
- </body>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。