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 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript知识点整理
Dec 09 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
JavaScript使用cookie
2007/02/02 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python函数式编程
2017/07/20 Python
python数据结构之列表和元组的详解
2017/09/23 Python
在python中安装basemap的教程
2018/09/20 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python缓存技术实现过程详解
2019/09/25 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
继电保护工岗位职责
2014/01/05 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
大班亲子运动会方案
2014/06/10 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
应急管理工作总结2015
2015/05/04 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS