zoukankan      html  css  js  c++  java
  • angularJs中的隐藏和显示

    <!DOCTYPE html>
    <html ng-app="a2_12">
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>
            <style type="text/css">
                body{
                    font-size: 12px;
                }
                ul{
                    list-style-type: none;
                    width: 408px;
                    margin: 0px;
                    padding: 0px;
                }
                div{
                    margin: 8px 0px;
                }
            </style>
        </head>
    
        <body>
            <div ng-controller="c2_12">
                <div ng-show="{{isShow}}">陶国荣</div>
                <div ng-hide="{{isHide}}">1012@qq.con</div>
                <ul ng-switch on={{switch}}>
                    <li ng-switch-when="1">11111111111111111</li>
                    <li ng-switch-when="2">22222222222222222</li>
                    <li ng-switch-default>33333333333333333</li>
                </ul>
            </div>
            <script type="text/javascript">
                var a2_12 = angular.module('a2_12', []);
                a2_12.controller('c2_12', ['$scope', function($scope) {
                    $scope.isShow=true;
                    $scope.isHide=false;
                    $scope.switch=2;
                }]);
            </script>
        </body>
    
    </html>

    ng-switch指令的功能是显示匹配成功的元素,该指令需要结合ng-switch-when和ng-switch-default指令使用.

    当指定的on值与某个或多个添加ng-switch-when指令的元素匹配时,这些元素显示,未匹配到的元素的隐藏.

    如果没有找到与on值相匹配的元素时,则显示添加了ng-switch-default指令的元素.

  • 相关阅读:
    多进程乱语
    python常用函数拾零
    Flutter 安装vscode
    Flutter 安装android studio
    vsCode设置
    android ViewPager
    Android shape
    android Intent
    java 集合
    java 泛型
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/5031190.html
Copyright © 2011-2022 走看看