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. [转] 评 WOW技能天赋设计

    本文转至:http://bbs.chinaunix.net/thread-1692302-8-1.html(只作转载, 不代表本站和博主同意文中观点或证实文中信息)再比如,传说中的面向对象本该大显神威 ...

  2. Vue基本应用

    1.  returnDetail.$mount('#returnDetail');  不用el 直接可以绑定数据到页面的id上 作用区域不能交叠多个vue 实体 否则后面的vue 实体会失效. 2. ...

  3. 【web前端面试题整理08】说说最近几次面试（水）

    为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在 ...

  4. Mockjs，模拟数据生成器

    (推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...

  5. xampp与Hbuilder、phpstorm配置

    1.xampp的安装就不用多说了,安装完按之后出现这个界面. 2.点击中间那个按钮,运行三个选项,全部正常之后是这样的,这样xampp就不用管了,但是要记下安装的路径,之后需要用 3.首先说Hbuil ...

  6. 我的屌丝giser成长记-研二篇

    之前有提到过的,本来按照计划中,研一结束就该去深圳中科院研究所实习的,之前跟里面师兄说好了的,奈何导师又接到一个新的科研研究项目,跟学院的几个其他老师一起合作的,主要是关于土地流转系统,而且是一个挺大 ...

  7. 深度剖析 | 基于大数据架构的BI应用

    说起互联网.电商的数据分析,更多的是谈应用案例,如何去实践数据化管理运营.而这里,我们要从技术角度分享关于数据的技术架构干货,如何应用BI. 原文是云猴网BI总经理王卫东在帆软大数据上的演讲,以下是整 ...

  8. [转] IIS配置文件的XML格式不正确 applicationHost.config崩溃 恢复解决办法

    IIS配置文件的XML格式不正确 applicationHost.config崩溃 恢复解决办法 源文件:http://www.cnblogs.com/yuejin/p/3385584.html   ...

  9. System.Json 使用注意

    在xamarin中对json字符串进行解析,使用System.Json时出现怪问题: json-string = { "ret" : "OK" } 使用如下代码 ...

  10. ArrayList、Vector、LinkedList的区别联系？

    1.ArrayList.Vector.LinkedList类都是java.util包中,均为可伸缩数组. 2.ArrayList和Vector底层都是数组实现的,所以,索引数据快,删除.插入数据慢. ...