使用指令隱藏顯示元素 · 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)