当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS实现标签页的两种方式

AngularJS实现标签页的两种方式

2018年05月10日  | 移动技术网IT编程  | 我要评论

一、通过普通指令实现标签页

<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的内容
 </div>
 <div class="tab-panel" ng-show="vm.activetab == 2">
 标签2的内容
 </div>
 </div>
</div>

<h3>说明</h3>
这里演示的是直接通过bootstrap实现的方法。
<hr/>还可以通过angular-bootstrap的tabset指令实现，参见 <a href="http://angular-ui.github.io/bootstrap/#/tabs" 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;
}

二、自定义指令实现的标签页

<!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）指令外部传递参数要使用ng-model，来声明变量，
         在指令中用scope：{
         value:'ngmodel'
         }来赋值

总结

以上就是关于angularjs实现标签页的全部内容，希望这篇文章对大家学习或使用angularjs能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网