快捷導(dǎo)航

AngularJS實現(xiàn)標簽頁的兩種方式

更新時間：2016年09月05日 14:59:55 作者：MakingChoice

這篇文章分別給大家介紹了AngularJS實現(xiàn)標簽頁的兩種方式，一種是通過普通指令實現(xiàn)標簽頁，另外一種是通過自定義指令實現(xiàn)的標簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。

一、通過普通指令實現(xiàn)標簽頁

<link rel="stylesheet" href="views/show/tab.css"/>
<div>
 <ul class="nav nav-tabs" ng-init="vm.activeTab=1">
 <li ng-class="{active: vm.activeTab == 1}"><a href="javascript:;" ng-click="vm.activeTab = 1">標簽1</a></li>
 <li ng-class="{active: vm.activeTab == 2}"><a href="javascript:;" ng-click="vm.activeTab = 2">標簽2</a></li>
 </ul>
 <div class="tab-content tab-bordered">
 <div class="tab-panel" ng-show="vm.activeTab == 1">
 標簽1的內(nèi)容
 </div>
 <div class="tab-panel" ng-show="vm.activeTab == 2">
 標簽2的內(nèi)容
 </div>
 </div>
</div>

<h3>說明</h3>
這里演示的是直接通過bootstrap實現(xiàn)的方法。
<hr/>還可以通過angular-bootstrap的tabset指令實現(xiàn)，參見 <a  target="_blank">官方Demo</a>


'use strict';

angular.module('ngShowcaseApp').controller('ctrl.show.tab', function ($scope) {
 var vm = $scope.vm = {};
});


.tab-content.tab-bordered {
 border: 1px solid lightgray;
 border-top: none;
 padding: 15px;
 border-radius: 0 0 4px 4px;
}

二、自定義指令實現(xiàn)的標簽頁

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="lib/angular.min.js" type="text/javascript"></script>
 <script src="lib/angular-route.js" type="text/javascript"></script>
 <script src="lib/jquery-2.1.4.min.js"></script>
 <script src="lib/bootstrap.js" type="text/javascript"></script>
 <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
 <style>
 .btn-group{
  position: relative;
  left: 40px;
 }
 .list-group{
  position: relative;
  left: 0;
 }

 .list-group-item{

 }
 #list3{
  width: 200px;
 }
 </style>
</head>
<body >

 <div ng-controller="directiveControl">
 <div style="width: 100px;height: 100px;border: 1px solid blue" ng-class="{'hidden':value}" ></div>
 <div>
  <list ng-model="value" ></list>
 </div>
 <script type="text/ng-template" id="list.html">
  <div >
  <div class="btn-group">
   <ul class="nav nav-tabs">
   <li role="presentation" ng-mouseover="flag=3" ng-mouseleave="flag=4"><a href="#" >{{name}}</a></li>
   </ul>
  </div>
  <div class="list-group" id="list3" ng-show="flag==3" ng-mouseover="flag=3" ng-mouseleave="flag=4">
   <ul >
   <li class="list-group-item " ng-click="fun1()"><a href="#">Action</a></li>
   <li class="list-group-item "><a href="#">Another action</a></li>
   <li class="list-group-item "><a href="#">Something else here</a></li>
   <li class="list-group-item "><a href="#">Separated link</a></li>
   </ul>
  </div>
  </div>
 </script>
 </div>

</body>
<script>
 var demo=angular.module("demo",[]);
 demo.controller("directiveControl", function ($scope) {

 });
 demo.directive("list",[function () {
 return {
  restrict:'EA',
  templateUrl:'list.html',
  scope:{
  value:'=ngModel'
  },

  link: function (scope,element,attr) {
  scope.name="home";
  scope.lists=[{name:'home'},{name:'family '}];
  scope.fun1= function () {
   scope.value=true;
   console.log("a")
  }
  }
 }
 }])
</script>
</html>

（1）首先要解決指令必須寫在一個根標簽中，一定要用div包裹
（2）指令外部傳遞參數(shù)要使用ng-model，來聲明變量，
         在指令中用scope：{
         value:'ngModel'
         }來賦值

總結(jié)

以上就是關(guān)于AngularJS實現(xiàn)標簽頁的全部內(nèi)容，希望這篇文章對大家學(xué)習(xí)或使用AngularJs能有所幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: