tab.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    <div my-title data="data"></div>

 </div>  

<script src="angular.min.js"></script>

<script src="jquery-3.1.1.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

    $scope.data = [

        {title:"英雄联盟",data:[

              {title:"诺克"},

              {title:"剑圣"}

        ]},

        {title:"王者荣耀",data:[

               {title:"刘备"},

               {title:"兰陵王"}

        ]}

       ];

}]);

app.directive('myTitle', function(){

   return {

   	restrict: 'EA',

   	templateUrl: 'time.html',

   	scope: {data:'=data'},

   	link: function(scope, elem, attr){                //link用来操作DOM元素

         $(elem).delegate('a', 'click', function(){       //外部文件的元素绑定事件要用live\on\delegate,根据jquery版本来选

            $('a').removeClass('active');                 //移除a标签class

            $(this).addClass('active');                   //为当前元素添加类

            var index = $(this).index();                  //获取序号index

            $(elem).find("div.list").hide();

            $(elem).find("div.list").eq(index-1).show();  //eq()方法获取索引，所以index需 -1

         });

   	}

   }

});

</script>

</body>

</html>

time.html

  • 父元素ng-repeath后，子元素ng-repeat才有效


<div class="tab">

    <style>

    	.tab a { text-decoration: none; display: inline-block;  border: 1px solid #ccc;}

    	.tab div {border: 1px solid #ccc; width:200px; height:200px; margin: 0;}

    	.active {background-color: #aaa; color: #fff;}

    </style>

	<a ng-repeat="v in data" href="#" ng-class="{active:$first}">{{v.title}}</a>

	<div ng-repeat="v in data" ng-style="{display: $first?'block':'none'}" class="list">  <!-- 父元素ng-repeat -->

		<ul>

			<li ng-repeat="m in v.data">{{m.title}}</li>                          <!-- 子元素ng-repeat -->

		</ul>

	</div>

</div>

angualr 实现tab选项卡功能的更多相关文章

  1. 实现类似Tab选项卡功能关键代码

    //放置显示不同Activity的控件 private LinearLayout mainContentLayout; private LocalActivityManager localActivi ...

  2. ExtJs4.2中Tab选项卡的右击关闭其它和关闭当前功能不准确的解决方法

    一.ExtJs4.2中Tab选项卡的右击关闭其它和关闭当前功能不准确的解决方法 二.找到ux目录下的TabCloseMenu.js文件,将内容替换成下面代码. 三.代码: /** * Plugin f ...

  3. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  4. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  5. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  6. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  7. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  8. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  9. Android中选项卡功能的实现

    Android中选项卡功能的实现 Android中使用TabHost和TabWidget来实现选项卡功能.TabHost必须是布局的根节点,它包含两个子节点: TabWidget,显示选项卡: Fra ...

随机推荐

  1. QT数据库连接的几个重要函数的使用及注意事项（原创）

    注:在这里数据库对象等同于数据库连接对象,也就是QSqlDatabase类的对象 QSqlDatabase QSqlDatabase::addDatabase((const QString & ...

  2. [转载]IIS7报500.23错误的解决方法

    原文出处: 原文作者:pizibaidu 原文链接:http://pizibaidu.blog.51cto.com/1361909/1794446 背景:今天公司终端上有一个功能打开异常,报500错误 ...

  3. ngrok

    为什么要使用ngrok?/ngrok 作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做: 找到一台运行于外网的Web服务器 ...

  4. javascript操作系统检测

    function detectOS() { var sUserAgent = navigator.userAgent;console.log(sUserAgent); var isWin = (nav ...

  5. PyCharm断点调试django

    我在用PyCharm开发django程序的时候,对于打印日志调试程序的方式感觉还是有点麻烦和不直观,所以研究了一下断点调试的方法如下: 1.打开你的工程,在菜单栏里找到Run-->Edit Co ...

  6. IOS 杂笔－12（类别de巧用 有便于Frame的操作）

    在实际开发中很多时候我们都为了控件frame的操作焦头烂额. 例如:我们只想要获取view的width. 我们可以这么操作:view.frame.size.width 有时我们想要改变view的wid ...

  7. datatable和list的转换

    在开发中,把查询结果以DataTable返回很方便,但是在检索数据时又很麻烦,没有list<T>检索方便.但是数据以ILIST形式返回,就为我们在.NET中使用传统的数据绑定造成了不便.下 ...

  8. 在Azure上部署Windows Server Core

    作为服务器操作系统,图形界面真心有些多余了,这也是很多人喜欢Linux服务器的原因之一.从Windows Server 2008开始,微软提供了Server Core版本,其实就是一个没有图形界面的服 ...

  9. Salesforce Apex页面中调用远端网络服务

    本文介绍了Salesforce Apex页面中调用远端网络服务的实现过程. ### 注册远端网络服务 在使用Apex代码调用远端网络服务之前,首先需要在Salesforce中注册远端网络服务地址, 本 ...

  10. jQuery获取margin-top和padding-top的值

    var bordT = $('img').outerWidth() - $('img').innerWidth();  var paddT = $('img').innerWidth() - $('i ...