AngularJs選項卡的不同寫法

本文轉載自查看原文 2017-06-29 22:04 1575

　　AngularJs選項卡的寫法有很多，每個人都會有自己的一個寫法，今天我來給大家展示兩種不同寫法的AngularJs選項卡！

　　方法一：

　　1.創建選項卡，我是在控制器里創建數組將其渲染在頁面上：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>選項卡1</title>
    <style>
        #ul{
            width: 415px;
            height: 50px;
        }
        #ul li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #c7c7c7;
            text-align: center;
            float: left;
            list-style: none;
        }
     
    </style>
    <script src="js/angular.min.js"></script>
    <script>
        var app=angular.module("mk",[]);
        app.controller("test",function($scope){
            $scope.arr=[
                {name:"選項1"},
                {name:"選項2"},
                {name:"選項3"}
            ];
})
    </script>
</head>
<body  ng-app="mk">
<div ng-controller="test">
    <ul id="ul">
        <li ng-repeat="item in arr">{{item.name}}</li>
    </ul>
</div>

</body>
</html>

　　2.創建選項卡相對應的數據，並將它們放在一個數組里，先讓第一個內容展現出來。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>選項卡1</title>
    <style>
        #ul{
            width: 415px;
            height: 50px;
        }
        #ul li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #c7c7c7;
            text-align: center;
            float: left;
            list-style: none;
        }
        #nr{ width: 400px; height: 400px; border: 1px solid #c7c7c7; } </style>
    <script src="js/angular.min.js"></script>
    <script>
        var app=angular.module("mk",[]);
        app.controller("test",function($scope){
            $scope.arr=[
                {name:"選項1"},
                {name:"選項2"},
                {name:"選項3"}
            ];
            $scope.str1=[
                {name:"選項1"},
                {name:"選項1"},
                {name:"選項1"}
            ];
            $scope.str2=[
                {name:"選項2"},
                {name:"選項2"},
                {name:"選項2"}
            ];
            $scope.str3=[
                {name:"選項3"},
                {name:"選項3"},
                {name:"選項3"}
            ];
            $scope.strs=[$scope.str1,$scope.str2,$scope.str3];
            $scope.str=$scope.strs[0];
        })
    </script>
</head>
<body  ng-app="mk">
<div ng-controller="test">
    <ul id="ul">
        <li ng-repeat="item in arr" ng-click="dj($index)">{{item.name}}</li>
    </ul>
    <div id="nr">
        <ul>
            <li ng-repeat="item in str">{{item.name}}</li>
        </ul>
    </div>
</div>
</body>
</html>

3.接下來實現點擊效果，點擊選項卡顯示相對應的數據。

html:

1 //在選項卡上添加一個點擊事件
2     <ul id="ul">
3         <li ng-repeat="item in arr" ng-click="dj($index)">{{item.name}}</li>
4     </ul>

js:

1 //            在控制器里添加點擊事件
2             $scope.dj=function(index){
3                 $scope.str=$scope.strs[index];4             }

好了點加效果實現了，等等，還沒有添加樣式；

4.當點擊選項卡時，給其加個紅色背景，先給第一個按鈕添加一個紅色背景。

html:

1 // 添加一個class類名 on
2     <ul id="ul">
3         <li ng-repeat="item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">{{item.name}}</li>
4     </ul>

js:

 1// 想給第一個選項卡添加class類名 on   
 2  　　　　　　$scope.arr[0].ischecked=true;
 3 //            在控制器里添加點擊事件
 4             $scope.dj=function(index){
 5                 $scope.str=$scope.strs[index];
 6 //                循環遍歷選項卡，先讓所有選項卡為初始樣式，點擊某個讓其添加class類名 on
 7                 angular.forEach($scope.arr,function(value,key){
 8                     value.ischecked=false;
 9                 });
10                 $scope.arr[index].ischecked=true;
11             }

現在我把他們整體串聯一下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>選項卡1</title>
 6     <style>
 7         #ul{
 8             width: 415px;
 9             height: 50px;
10         }
11         #ul li{
12             width: 100px;
13             height: 50px;
14             line-height: 50px;
15             border: 1px solid #c7c7c7;
16             text-align: center;
17             float: left;
18             list-style: none;
19         }
20         #nr{
21             width: 400px;
22             height: 400px;
23             border: 1px solid #c7c7c7;
24         }
25         .on{
26             background: red;
27         }
28     </style>
29     <script src="js/angular.min.js"></script>
30     <script>
31         var app=angular.module("mk",[]);
32         app.controller("test",function($scope){
33             $scope.arr=[
34                 {name:"選項1"},
35                 {name:"選項2"},
36                 {name:"選項3"}
37             ];
38             $scope.str1=[
39                 {name:"選項1"},
40                 {name:"選項1"},
41                 {name:"選項1"}
42             ];
43             $scope.str2=[
44                 {name:"選項2"},
45                 {name:"選項2"},
46                 {name:"選項2"}
47             ];
48             $scope.str3=[
49                 {name:"選項3"},
50                 {name:"選項3"},
51                 {name:"選項3"}
52             ];
53             $scope.strs=[$scope.str1,$scope.str2,$scope.str3];
54             $scope.arr[0].ischecked=true;
55             $scope.str=$scope.str1;
56 //            在控制器里添加點擊事件
57             $scope.dj=function(index){
58                 $scope.str=$scope.strs[index];
59 //                循環遍歷選項卡，先讓所有選項卡為初始樣式，點擊某個讓其添加class類名 on
60                 angular.forEach($scope.arr,function(value,key){
61                     value.ischecked=false;
62                 });
63                 $scope.arr[index].ischecked=true;
64             }
65         })
66     </script>
67 </head>
68 <body  ng-app="mk">
69 <div ng-controller="test">
70     <ul id="ul">
71         <li ng-repeat="item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">{{item.name}}</li>
72     </ul>
73     <div id="nr">
74         <ul>
75             <li ng-repeat="item in str">{{item.name}}</li>
76         </ul>
77     </div>
78 </div>
79 </body>
80 </html>

　　方法二：

　　1.創建選項卡，同方法一的第一點大致相同也是在控制器里創建數組將其渲染在頁面上：

<!DOCTYPE html>
<html ng-app="mk">
<head lang="en">
    <meta charset="UTF-8">
    <title>選項卡2</title>
    <style>
        #ul{
            width: 415px;
            height: 50px;
        }
        #ul li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #c7c7c7;
            text-align: center;
            float: left;
            list-style: none;
        }
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #c7c7c7;
        }
      
    </style>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script>
        var app=angular.module("mk",['ngRoute']);
        app.controller("test",function($scope){
            $scope.arr=[
                {name:"選項1",href:"#/index1" },
                {name:"選項2",href:"#/index2" },
                {name:"選項3",href:"#/index3" }
            ];
    </script>
</head>
<body ng-app="mk"ng-controller="test"> 
 　　<ul id="ul">
 　　　　<li ng-repeat="item in arr"><a ng-href="{{item.href}}">{{item.name}}</a></li> 
　　</ul> 
</div>
 </body> 
</html>

　　2.在script中創建選項卡相對應的數據與其鏈接相對應，實現點擊效果；

html:

        <ul id="ul">
            <li ng-repeat="item in arr" ng-click="dj($index)"><a ng-href="{{item.href}}">{{item.name}}</a></li>
        </ul>
　　　//　展示內容部分
        <div ng-view>

js:

   <script type="text/ng-template" id="index1">
    <ul>
        <li>選項11</li>
        <li>選項11</li>
        <li>選項11</li>
    </ul>
    </script>
    <script type="text/ng-template" id="index2">
        <ul>
            <li>選項21</li>
            <li>選項21</li>
            <li>選項21</li>
        </ul>
    </script>
    <script type="text/ng-template" id="index3">
        <ul>
            <li>選項31</li>
            <li>選項31</li>
            <li>選項31</li>
        </ul>
    </script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script>
        var app=angular.module("mk",['ngRoute']);
        app.controller("test",function($scope){
            $scope.arr=[
                {name:"選項1",href:"#/index1" },
                {name:"選項2",href:"#/index2" },
                {name:"選項3",href:"#/index3" }
            ];
        });
        app.config(function($routeProvider){ $routeProvider.when('/index1',{
                templateUrl:"index1"
            }).when('/index2',{
                templateUrl:"index2"
            }).when('/index3',{
                templateUrl:"index3"
            }).otherwise(
                    {redirectTo:'/index1'} )
        })
    </script>

　　3.還是添加class類名與上一方法的相同

js:

//            在控制器里添加
            $scope.arr[0].ischecked=true;
            $scope.dj=function(index){
                angular.forEach($scope.arr,function(value,key){
                    value.ischecked=false;
                });
                $scope.arr[index].ischecked=true;
            }

方法二的完整代碼：

<!DOCTYPE html>
<html ng-app="mk">
<head lang="en">
    <meta charset="UTF-8">
    <title>選項卡1</title>
    <style>
        #ul{
            width: 415px;
            height: 50px;
        }
        #ul li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #c7c7c7;
            text-align: center;
            float: left;
            list-style: none;
        }
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #c7c7c7;
        }
        .on{
            background: red;
        }
    </style>
    <script type="text/ng-template" id="index1">
    <ul>
        <li>選項11</li>
        <li>選項11</li>
        <li>選項11</li>
    </ul>
    </script>
    <script type="text/ng-template" id="index2">
        <ul>
            <li>選項21</li>
            <li>選項21</li>
            <li>選項21</li>
        </ul>
    </script>
    <script type="text/ng-template" id="index3">
        <ul>
            <li>選項31</li>
            <li>選項31</li>
            <li>選項31</li>
        </ul>
    </script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script>
        var app=angular.module("mk",['ngRoute']);
        app.controller("test",function($scope){
            $scope.arr=[
                {name:"選項1",href:"#/index1" },
                {name:"選項2",href:"#/index2" },
                {name:"選項3",href:"#/index3" }
            ];
            $scope.arr[0].ischecked=true;
            $scope.dj=function(index){
                angular.forEach($scope.arr,function(value,key){
                    value.ischecked=false;
                });
                $scope.arr[index].ischecked=true;
            }
        });
        app.config(function($routeProvider){
            $routeProvider.when('/index1',{
                templateUrl:"index1"
            }).when('/index2',{
                templateUrl:"index2"
            }).when('/index3',{
                templateUrl:"index3"
            }).otherwise(
                    {redirectTo:'/index1'}
            )

        })
    </script>
</head>
<body ng-controller="test">
<ul id="ul">
    <li ng-repeat="item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}"><a ng-href="{{item.href}}">{{item.name}}</a></li>
</ul>
<div ng-view>
</div>
</body>
</html>

我感覺第二種方法要更簡單點，你們怎么看。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js選項卡原理及其寫法 angularjs 選項卡 --- 自定義屬性 Tabs( 選項卡) BootStrap選項卡 tab選項卡 Bootstrap之選項卡 Bootstrap選項卡 JS實現選項卡和JQ實現選項卡 Android選項卡學習 Matlab GUI選項卡