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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
Rust中的Struct使用示例详解
Aug 14 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小偷相关截取函数备忘
2010/11/28 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php自定义时间转换函数示例
2016/12/07 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
Python类的基础入门知识
2008/11/24 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Python类装饰器实现方法详解
2018/12/21 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Django 大文件下载实现过程解析
2019/08/01 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
pytorch梯度剪裁方式
2020/02/04 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
教学大赛获奖感言
2014/01/15 职场文书
管理专员自荐信
2014/01/26 职场文书
社区食品安全实施方案
2014/03/28 职场文书
学习经验演讲稿
2014/05/10 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS