AngularJS实现标签页的两种方式


Posted in Javascript onSeptember 05, 2016

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

<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能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
JS简单随机数生成方法
Sep 05 #Javascript
使用React实现轮播效果组件示例代码
Sep 05 #Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 #Javascript
You might like
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
学习ExtJS form布局
2009/10/08 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
opencv实现图像几何变换
2021/03/24 Python
最新教师自我评价分享
2013/11/12 职场文书
计算机应用与科学个人的自我评价
2013/11/15 职场文书
触电现场处置方案
2014/05/14 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
预备党员党支部意见
2015/06/02 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android