AngularJS的指令

最新推荐文章于 2025-07-12 06:14:47 发布

原创最新推荐文章于 2025-07-12 06:14:47 发布 · 298 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的选项卡组件案例，包括样式设置、控制器编写及视图展示等内容。通过实例展示了AngularJS中选项卡切换、数据绑定和列表重复等功能。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
   <head>
       <meta charset="UTF-8">
       <title>选项卡</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           /*标题列表 */
           #btn_group {
               list-style: none;
               margin: 0 auto;
               width: 850px;
           }

           #btn_group li {
               width: 200px;
               height: 40px;
               line-height: 40px;
               border: 1px solid black;
               float: left;
               margin: 5px;
               text-align: center;
           }

           #content {
               width: 800px;
               height: 400px;
               border: 1px solid black;
               overflow: hidden;
               clear: both;
               margin: 0 auto;
               position: relative;
           }

           #content div {
               position: absolute;
               top: 0;
               left: 0;
           }

           .btn_in {
               background: blue;
           }

           .selected {
               background-color: lightgreen;
           }

           .hide {
               display: none;
           }

           .show {
               display: block;
           }
       </style>
       <script src="lib/angular.min.js" ></script>
       <script>
           var myapp= angular.module("myApp",[]);
           myapp.controller("myCtr",["$scope",function($scope){
               $scope.xz=0;

               $scope.lists=["韦作铭","罗兵","伊喜龙","谢帅康"];
               $scope.show=function(i){
                   $scope.xz=i;

               }

               $scope.stus=[{name:'罗兵',age:23,sex:"男"},{name:'伊喜龙',age:22,sex:"男"},{name:'谢帅康',age:21,sex:"男"}];
           }]);

       </script>
   </head>
   <body ng-controller="myCtr">
       <ul id="btn_group">
           <li ng-repeat="title in lists" ng-class="{selected: $index==xz }" ng-click="show($index)">
               {{title}}
           </li>

       </ul>
       <br />
       <br />
       <br />
       <br />
       <div align="center" ng-app="">
           <ul>
               <li ng-show="1">当值为true时显示,false不显示</li>
               <li ng-hide="0">当值为true时隐藏,false显示</li>
               <li ng-show="1">+++++++++++++++++++</li>
               <li ng-show="xz==0">韦作铭</li>
               <li ng-show="xz==1">罗兵</li>
               <li ng-show="xz==2">伊喜龙</li>
               <li ng-show="xz==3">谢帅康</li>
               <li ng-show="1">+++++++++++++++++++++</li>
           </ul>
       </div>

       <div align="center" ng-controller="myCtr">
           <ul>
               <li ng-repeat="a in lists">{{$index}} {{a}}</li>
           </ul>
               人员信息
           <ul ng-init="dogs=[{name:'韦作铭',age:23}]">
               <li ng-repeat="stu in dogs">
                       编号:{{$index}} 姓名:{{stu.name}}年龄:<span ng-bind="stu.age"></span>
               </li>
           </ul>
               组员列表


           <ul>
               <li ng-repeat="stu in stus">
                       编号:{{$index+1}} 姓名:{{stu.name}}年龄:{{stu.age}}
               </li>
           </ul>
       </div>

   </body>
</html>