AngularJS实现标签页的两种方式  更新时间:2016年09月05日 14:59:55   作者:MakingChoice   这篇文章分别给大家介绍了AngularJS实现标签页的两种方式,一种是通过普通指令实现标签页,另外一种是通过自定义指令实现的标签页,有需要的朋友们可以来参考借鉴,下面来一起看看吧。 一、通过普通指令实现标签页 标签1 标签2 标签1的内容 标签2的内容 说明 这里演示的是直接通过bootstrap实现的方法。 还可以通过angular-bootstrap的tabset指令实现,参见 官方Demo ‘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; } 二、自定义指令实现的标签页 (1)首先要解决指令必须写在一个根标签中,一定要用div包裹 (2)指令外部传递参数要使用ng-model,来声明变量,          在指令中用scope:{          value:’ngModel’          }来赋值 总结 以上就是关于AngularJS实现标签页的全部内容,希望这篇文章对大家学习或使用AngularJs能有所帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: JavaScript实现Tab标签页切换的最简便方式(4种) vue.js实现标签页切换效果 AngularJS标签页tab选项卡切换功能经典实例详解 JS实现标签页切换效果 最简单纯JavaScript实现Tab标签页切换的方式(推荐) JS实现切换标签页效果实例代码 纯css+js写的一个简单的tab标签页带样式 JS实现标签页效果(配合css) JavaScript实现标签页切换效果 angularjs 标签页 相关文章 AngularJS使用指令增强标准表单元素功能 这篇文章主要介绍了AngularJS使用指令增强标准表单元素功能,包括数据绑定、建立模型属性、验证表单等,感兴趣的小伙伴们可以参考一下 2016-07-07 Angular实现点击按钮控制隐藏和显示功能示例 这篇文章主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下 2017-12-12 AngularJS动态添加数据并删除的实例 下面小编就为大家分享一篇AngularJS动态添加数据并删除的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 angular.js指令中transclude选项及ng-transclude指令详解 这篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude选项的相关资料,文中介绍的非常详细,并给出了完整的示例代码大家参考学习,需要的朋友们下面来一起看看吧。 2017-05-05 Angular如何在应用初始化时运行代码详解 这篇文章主要给大家介绍了关于Angular如何在应用初始化时运行代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-06-06 AngularJS2 与 D3.js集成实现自定义可视化的方法 本篇文章主要介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 详解Angular项目中共享模块的实现 本文主要介绍了Angular的共享模块的实现,对此感兴趣的同学,可以实验一下 2021-05-05 对Angular.js Controller如何进行单元测试 这篇文章主要给大家介绍了如何对Angular Controller进行单页测试。如果你不太了解angular也没关系,本文也会提及关于Angular的一些知识。文中通过示例代码介绍的很详细,详细对大家的理解和学习很有帮助,下面来一起看看吧。 2016-10-10 Angular封装WangEditor富文本组件的方法 这篇文章主要介绍了Angular封装WangEditor富文本组件,得益于Angular的强大,封装WangEditor组件非常简单,需要的朋友可以参考下 2021-07-07 全面解析Angular中$Apply()及$Digest()的区别 $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑。这篇文章主要介绍了Angular中$Apply()及$Digest()区别详细说明的相关资料,需要的朋友可以参考下 2016-08-08 最新评论

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

<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实现Tab标签页切换的最简便方式(4种)
  • vue.js实现标签页切换效果
  • AngularJS标签页tab选项卡切换功能经典实例详解
  • JS实现标签页切换效果
  • 最简单纯JavaScript实现Tab标签页切换的方式(推荐)
  • JS实现切换标签页效果实例代码
  • 纯css+js写的一个简单的tab标签页带样式
  • JS实现标签页效果(配合css)
  • JavaScript实现标签页切换效果
张贴在3