使用指令隐藏显示元素 · angular

[TOC] # Angular隐藏显示元素ng-show、ng-hide、ng-switch 在Angular中，可以通过“ng-show”“ng-hide”和“ng-switch”指令来控制元素隐藏与显示的状态，前两个指令直接控制元素的显示和隐藏状态，当“ng-show”值为true或“ng-hide”值为false时，元素显示，反之，元素隐藏。 “ng-switch”指令的功能是显示匹配成功的元素，该指令需要结合“ng-switch-when”和“ng-switch-defalut”指令使用。在“ng-switch”指令中，当指定的“on”值与某个或多个添加“ng-switch-when”指令的元素匹配时，这些元素显示，其他未匹配的元素则隐藏。如果没有找到与“on”值相匹配的元素时，则显示添加了“ng-switch-defalut”指令的元素。 ## 案例1 #### app.js ~~~js //创建模块 angular.module('myapp',[]); ~~~ #### index.js ~~~js //创建控制器 angular.module('myapp').controller('my_c', ['$scope', function ($scope) { //ng-switch的on的变量 $scope.selection='home'; }]); ~~~ #### index.html ~~~html <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body> <p ng-hide="true">aaaaaaaaaaa1</p> <p ng-show="false">aaaaaaaaaaa2</p> <p>aaaaaaaaaaa3</p> <p>aaaaaaaaaaa4</p> <p>aaaaaaaaaaa5</p> <div ng-controller="my_c"> <div ng-switch on="selection"> <div ng-switch-when="settings">Settings Div</div> <div ng-switch-when="home">Home Span</div> <div ng-switch-default>default</div> </div> </div> </body> </html> ~~~ ## 结果 ![](https://box.kancloud.cn/2016-09-10_57d3f72ac50cb.png)