angularJs中的隐藏和显示

本文转载自查看原文 2015-12-08 21:59 2681

<!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指令的元素.

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue中显示和隐藏导航 ZBrush中物体的显示与隐藏 angularjs中只显示选中的radio的值 angularjs中，页面部分元素是通过ng-show来控制其否显示的，页面刚加载时，会闪烁，出来一下又隐藏 Revit中如何控制图元的显示与隐藏 jquery设置table中td隐藏显示 MAC中显示隐藏文件 jQuery中的动画效果(隐藏与显示) vue中密码显示隐藏切换 react中控制元素的显示与隐藏