angularjs中切换显示/隐藏

無名 发表于: 2018-03-28   最后更新时间: 2020-07-01 10:01:47  
{{totalSubscript}} 订阅, 3,646 游览

1、列表隐藏/显示

<span ng-click="showList = !showList">应用列表</span>
  <ul ng-show="showList" class="sub-list">
    <li>aa</li>
    <li>aa</li>
    <li>aa</li>
  </ul>
</span>

在线运行

2、标签切换

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>ng-show and ng-hide directives</title>
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
</head>
<body>
<div ng-controller="VisibleController">
    <p ng-show="visible">字符串1</p>
    <p ng-hide="visible">字符串2</p>
    <button ng-click="toggle()">切换</button>
</div>

    <script type="text/javascript">
        var app = angular.module('app',[]);
            app.controller('VisibleController', function($scope){
                $scope.visible = false;
                $scope.toggle = function () {
                    $scope.visible = !$scope.visible;
                }
            });
    </script>
</body>
</html>

在线运行

更新于 2020-07-01

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章