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 MD5加密实现代码
Mar 15 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
antd多选下拉框一行展示的实现方式
Oct 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
mysql 全文搜索 技巧
2007/04/27 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
PHP实现简易图形计算器
2020/08/28 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
图文详解WinPE下安装Python
2016/05/17 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
对Python中内置异常层次结构详解
2018/10/18 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python3 logging日志封装实例
2020/04/08 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
通俗讲解python 装饰器
2020/09/07 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
祖国在我心中演讲稿300字
2014/05/04 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
大学生十八大感想
2015/08/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js