本篇介绍angular控制视图的显示和隐藏:
通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏:
ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素
ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素
(其实只要用到其中一个就可以了)
下面来看个简单的例子,点击按钮可以显示/隐藏元素:
<!DOCTYPE html> <html ng-app> <head> <title>5.1.显示和隐藏</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="ShowHide"> <ul> <button ng-click="toggleShow()">{{text}}</button> </ul> <div class="content" ng-show="ifShow"></div> </div> </body> </html>
function ShowHide ($scope){ $scope.text = "点击显示框"; $scope.ifShow = false; $scope.toggleShow = function(){ $scope.ifShow = !$scope.ifShow; $scope.text = $scope.text=='点击显示框' ? '点击隐藏框' : '点击显示框' } }
给button绑定点击事件回调,点击的时候触发toggleShow回调
toggleShow回调会对ifShow变量取反,然后对应的ui的就是被隐藏/显示
同时,toggleShow回调也改变按钮的文本提示
原始页面:
点击按钮后:
再次点击后:
