你的位置:首页 > Java教程

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