1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6.   <style>
  7.     .gimg{width:50px;height:50px;}
  8.     .goodsone{float:left;}
  9.     .goodsone h1{cursor:pointer}
  10.     .goodsone h1.selected{border:1px solid #ccc;background-color: #C00;}
  11.   </style>
  12. </head>
  13. <body>
  14. <div ng-app="myApp1"  ng-controller="myCtrl1" class="testtop container">
  15.  
  16. <div class="goodsone "  ng-repeat="x in allGoods">
  17.  
  18. <h1 class="goodstitle"  ng-click="toggle($event,$index);" ng-if="$index != 0">{{x.title}}</h1>
  19. <h1 class="goodstitle selected"  ng-click="toggle($event,$index);" ng-if="$index == 0">{{x.title}}</h1>
  20.  
  21.   <div  ng-show="myCurrent == $index" class="realcontent">
  22.  
  23.   <ul>
  24.     <li ng-repeat="y in x.goods">
  25.       <dl><dt >{{y.name}}</dt>
  26.         <dd>{{y.price}}</dd><dd><a href="product-{{y.id}}.html"><img class="gimg" ng-src="{{y.img}}"></a></dd></dl>
  27.     </li>
  28.   </ul>
  29.  
  30. </div>
  31.  
  32. </div>
  33.  
  34. </div>
  35. <script>
  36.   var app = angular.module('myApp1', []);
  37.   app.controller('myCtrl1', function($scope) {
  38.     $scope.allGoods=[
  39.  
  40.       {
  41.         title: '标题1',
  42.         goods: [{
  43.           id: '1',
  44.           name: 'Jani',
  45.           country: 'Norway',
  46.           price: "1.00",
  47.           img: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
  48.         },
  49.           {
  50.             id: '2',
  51.             name: 'Hege',
  52.             country: 'Sweden',
  53.             price: "2.00",
  54.             img: 'http://p0.meituan.net/avatar/1dff8c38406d4d6b6540c69503f409d357171.jpg'
  55.           },
  56.           {id: '3', name: 'Kai', country: 'Denmark', price: "3.00", img: 'http://up.qqjia.com/z/25/tu32695_9.jpg'}
  57.         ]
  58.       },
  59.       {
  60.         title: '标题2',
  61.         goods: [{
  62.           id: '2',
  63.           name: 'Jani222',
  64.           country: 'China',
  65.           price: "6.00",
  66.           img: 'http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs5DadIS-IAALGbQPo5ngACzkl365.jpg'
  67.         },
  68.           {
  69.             id: '6',
  70.             name: 'Sk',
  71.             country: 'Sweden2',
  72.             price: "5.00",
  73.             img: 'http://cdn.duitang.com/uploads/item/201610/20/20161020070310_c5xWi.jpeg'
  74.           },
  75.           {
  76.             id: '3', name: 'Kai', country: 'Denmark', price: "3.00", img: 'http://up.qqjia.com/z/25/tu32695_9.jpg'
  77.           }
  78.         ]
  79.       },
  80.       {
  81.         title: '标题3',
  82.         goods: [{
  83.           id: '4',
  84.           name: 'OOMD',
  85.           country: 'Yuena',
  86.           price: "63.00",
  87.           img: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
  88.         },
  89.           {
  90.             id: '6',
  91.             name: 'JKHD',
  92.             country: 'MMLLD',
  93.             price: "25.00",
  94.             img: 'http://p0.meituan.net/avatar/1dff8c38406d4d6b6540c69503f409d357171.jpg'
  95.           },
  96.           {
  97.             id: '3', name: 'Kai', country: 'Denmark', price: "3.00", img: 'http://up.qqjia.com/z/25/tu32695_9.jpg'
  98.           }
  99.         ]
  100.       }
  101.     ];
  102.     $scope.myCurrent=0;
  103.  
  104.     $scope.toggle=function(event,indexnow){
  105.       var clickele=angular.element(event.target);
  106.       //angular.element(document.querySelector(".goodsone h1")).removeClass("selected");
  107.       angular.element(document).find('h1').removeClass("selected");
  108.      // alert(clickele);
  109.       clickele.addClass("selected");
  110.       $scope.myCurrent=indexnow;
  111.     }
  112.   });
  113. </script>
  114.  
  115. </body>
  116. </html>

angular 实现tab切换（循环输出tab标题及tab下属内容，非direct,非include）的更多相关文章

  1. angular绑定数据 使用循环输出列表数据

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  2. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局（27分36秒）

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  3. Tab切换类型

    Tab切换类型 点击Tab 滑过Tab 延迟Tab CSS样式 ; ; list-style:none; font-size:12px;} .notice{width:298px; height:98 ...

  4. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

  5. 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...

  6. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  7. jquery TAB切换小插件

    //tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...

  8. Angular——tab切换案例

    基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...

  9. angular.js实现二级tab切换

    <div class="guide-type"> <h3 ng-class="{true:'active', false:''}[tab == 'pc' ...

随机推荐

  1. cocos2d-x创建项目

    2.0之后的创建项目方法 第一步,首先 cd cocos2d-x-2.2.1/tools/project-creator/ 第二步, ./create_project.py -project Hell ...

  2. java 调用 sql server存储过程

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...

  3. php大力力 [051节] 支付宝支付.申请支付资质，等待审核中

    https://beecloud.cn/doc/payapply/?index=6 支付宝支付申请支付资质 一.注册支付宝用户 在支付宝官网注册成为用户 二.签约对应支付产品 应用集成支付宝支付,需要 ...

  4. soj1001算法分析

    题目简单描述: 给定一个长数串,输出可能的字母串解个数.(A对应1,Z对应26) 样例输入:25114 样例输出:6 样例解释:可能的字母串解:YJD.YAAD.YAN.BEJD.BEAAD.BEAN ...

  5. HTML教程-各窗口间相互操作(Frame Target)

    由Frames分出来的几个窗口的内容并不是静止不变的,往往一个窗口的内容随着另一个窗口的要求而不断变化,这就提高了Frames的利用价值.为了完成各窗口之间的相互操作,我们必须为每一个窗口起一个名字, ...

  6. Android ListView 多样式Item的一个注意点:(

    闲来无事,在写一个多样式Item的ListView的Demo时,遇到了一个以前没遇过的问题; ╮(￣▽￣")╭ 我们知道,ListView里可以有多种样式的item, 实现只需要重写: @O ...

  7. PHP易混淆函数的区分方法及意义

    1.echo和print的区别   PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此 ...

  8. HttpFox插件安装和打开教程

    HttpFox插件安装教程 1.打开火狐浏览器,选择右上角的打开菜单 2.选择附加组件,在获取附件组件栏中搜索HttpFox插件 3.找到HttpFox插件选择安装 4.安装完成后选择左边的扩展栏确认 ...

  9. stm32f10x .icf文件 可以看懂

    /*###ICF### Section handled by ICF editor, don't touch! ****//*-Editor annotation file-*//* IcfEdito ...

  10. Android之AnimationDrawable初识

    Drawable animation可以加载Drawable资源实现帧动画.AnimationDrawable是实现Drawable animations的基本类. 这里用AnimationDrawa ...