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 选择器项目实例分析及实现代码
Dec 28 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
简单分析js中的this的原理
Aug 31 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
JS出现404错误原理及解决方案
2020/07/01 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python的等深分箱实例
2019/11/22 Python
python如何判断IP地址合法性
2020/04/05 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
django 外键创建注意事项说明
2020/05/20 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
校长四风对照检查材料
2014/09/27 职场文书
消防安全月活动总结
2015/05/08 职场文书
运动会开幕式主持词
2015/07/01 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
Python Parser的用法
2021/05/12 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
详细了解java监听器和过滤器
2021/07/09 Java/Android