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. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  2. 使用 ExecuteMultiple 提高批量数据加载的性能

    您可以使用 ExecuteMultipleRequest 消息在 Microsoft Dynamics CRM Online 2016 Update 和 Microsoft Dynamics CRM ...

  3. 对iOS10新增Api的详细探究

    本文主要是一些对iOS新功能的探索,之前发现博客里关于iOS新功能的分析大多是过于概括,每个功能几句话,无法了解到具体的功能.所以本次的探索是基于Api层面,着重看一些具体用法所做的笔记,本来想分别画 ...

  4. iOS类中的属性设置背景色（统一）

    unsigned int count; objc_property_t *properties = class_copyPropertyList([self class], &count); ...

  5. Atitit. 项目文档目录大纲 总集合  v2

    Atitit. 项目文档目录大纲 总集合  v2 -----Atitti.原有项目源码的架构,框架,配置与环境说明 v3 q511 -----Atitit.开发环境 与 工具 以及技术框架 以及 注意 ...

  6. JS 字符串

    var str = "aaddaabbcdddefg" console.log(str.charAt());//b 没有返回空不是null console.log(str.inde ...

  7. Activity往另外一个Activity传值，Fragment获取另外一个Activity里面的值。

    在oneActivity中实现跳转到MainActivity //intent 用来跳转另外一个MainActivity,bundle传值到MainActivity         Intent Ma ...

  8. 关于Jmeter分布式测试在公司内的使用

    首先非常感谢虫师的文章受益匪浅 http://www.cnblogs.com/fnng/category/345478.html 今天,花了半天时间进行分布式的测试,真是纠结啊!! RT 1.在公司用 ...

  9. Eclipse注释模板设置详解

    设置注释模板的入口:Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元素 ...

  10. BZOJ 1030: [JSOI2007]文本生成器 [AC自动机 DP]

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3953  Solved: 1614[Submit][Stat ...