AngualrJS（八）控制视图显示隐藏

最新推荐文章于 2023-09-10 22:46:40 发布

wea111222333

最新推荐文章于 2023-09-10 22:46:40 发布

阅读量388

点赞数

分类专栏： AngularJS 文章标签： angularjs

AngularJS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

转载地址：http://www.cnblogs.com/liulangmao/p/3716600.html

本篇介绍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=='点击显示框' ? '点击隐藏框' : '点击显示框'
    }
}