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. 高性能 TCP & UDP 通信框架 HP-Socket v3.4.1

    HP-Socket 是一套通用的高性能 TCP/UDP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C#.Del ...

  2. Angular的自定义指令以及实例

    本文章已收录于:  AngularJS知识库  分类: javascript(55)  http://www.cnblogs.com/xiaoxie53/p/5058198.html   前面的文章介 ...

  3. 怎样给div增加resize事件

    当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢? 先来回答另一个问题,监听 ...

  4. 初探React，将我们的View标签化

    前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...

  5. Linux命令-文件文本操作grep

    文件文本操作 grep 在文件中查找符合正则表达式条件的文本行 cut 截取文件中的特定字段 paste 附加字段 tr 字符转换或压缩 sort 调整文本行的顺序,使其符合特定准则 uniq 找出重 ...

  6. ReactNative中iOS和Android的style分开设置教程

    reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了. 但是也许大家会遇到一些屏幕布局的问题, 最常遇 ...

  7. vs2013 git 使用总结

    一.参与别人已经建好的项目 方法1.打开VS2013,切换到“团队资源管理器”,点上方“主页”右侧的下拉三角,选择项目->连接到团队项目,然后选择“克隆”,填入Git的Remote Url和要克 ...

  8. Spark SQL 之 DataFrame

    Spark SQL 之 DataFrame 转载请注明出处:http://www.cnblogs.com/BYRans/ 概述(Overview) Spark SQL是Spark的一个组件,用于结构化 ...

  9. [笔记]linux磁盘管理

    sudo mount -r /dev/sda3 /mnt/vista 只读挂载 sudo umount sudo umount -r 无法卸载时只读重新挂载 mount -t(指明设备类型) 可用参数 ...

  10. vs2013给项目统一配置boost库

    1.打开项目,然后点击菜单中的 视图->其他窗口->属性管理器 2. 打开属性管理器,点击项目前的箭头,展开项目,找到debug或者release下面的Microsoft.Cpp.Win3 ...