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. CentOS 防火墙开放特定端口

    iptables是linux下的防火墙,同时也是服务名称.   service  iptables  status        查看防火墙状态 service  iptables  start   ...

  2. JAVA 问题集中之处以及解决的办法

    也许当你看的时候,你可能认为这些都是简单的问题,有什么好记的.其实不是,我认为,我们往往是因为粗心而造成的错误,当你在开发中碰到这些问题时,你能一下看出来是什么错误,达到提高效率.而且往往你把小的问题 ...

  3. 天猫魔盒远程安装APP

    从前的小米盒子299给了父母用,前段时间天猫搞活动,99撸了一个天猫魔盒,天猫亲爹阿里真是有钱任性.由于广电总局各种规定,当然也有盒子厂商的利益,默认很多片是需要付费观看的,而且也看不了电视直播.所以 ...

  4. 传统软件和SaaS，差异究竟在哪里

    这篇文章从创业起步阶段.产品形态和产品策略.市场竞争格局三个方面比较了中美 SaaS 领域的异同,在文章的最后,作者根据自己在 Box 的工作经历对在国内做 SaaS 的公司提出了四点建议. 我曾有幸 ...

  5. 【代码笔记】iOS-字体抖动动画

    一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...

  6. Oracle学习笔记十 使用PL/SQL

    PL/SQL 简介 PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言,是对 SQL 的扩展,它支持多种数据类型,如大对象和集合类型,可使用 ...

  7. PHP中的数据库一、MySQL优化策略综述

    前些天看到一篇文章说到PHP的瓶颈很多情况下不在PHP自身,而在于数据库.我们都知道,PHP开发中,数据的增删改查是核心.为了提升PHP的运行效率,程序员不光需要写出逻辑清晰,效率很高的代码,还要能对 ...

  8. (转载) 浅谈python编码处理

    最近业务中需要用 Python 写一些脚本.尽管脚本的交互只是命令行 + 日志输出,但是为了让界面友好些,我还是决定用中文输出日志信息. 很快,我就遇到了异常: UnicodeEncodeError: ...

  9. 浏览器js与css文件有缓存未更新致最新版本

    这是由于编码人员频繁更改引入的资源文件,浏览器中存在缓存,当你清空浏览器缓存也无济于事时可以采用在资源文件尾部加?_MM(MM为随机参数)即可强制更新资源文件.

  10. windows下redis安装

    最近因公司项目原因,去了趟昆明出差,其中第一次接触安装redis,配置sentinel,学习到不少,但也都是皮毛而已,本随笔记下所学知识. 1.首先介绍下redis,来源自百度百科 redis是一个k ...