angularjs中切换显示/隐藏

無名 发表于: 2018-03-28   最后更新时间: 2020-07-01 10:01:47  

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>

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容


上一条: angularjs对于不同module间的依赖注入
下一条: angularJs利用Directive实现View复用