<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

  <style>

    .gimg{width:50px;height:50px;}

    .goodsone{float:left;}

    .goodsone h1{cursor:pointer}

    .goodsone h1.selected{border:1px solid #ccc;background-color: #C00;}

  </style>

</head>

<body>

<div ng-app="myApp1"  ng-controller="myCtrl1" class="testtop container">

<div class="goodsone "  ng-repeat="x in allGoods">

<h1 class="goodstitle"  ng-click="toggle($event,$index);" ng-if="$index != 0">{{x.title}}</h1>

<h1 class="goodstitle selected"  ng-click="toggle($event,$index);" ng-if="$index == 0">{{x.title}}</h1>

  <div  ng-show="myCurrent == $index" class="realcontent">

  <ul>

    <li ng-repeat="y in x.goods">

      <dl><dt >{{y.name}}</dt>

        <dd>{{y.price}}</dd><dd><a href="product-{{y.id}}.html"><img class="gimg" ng-src="{{y.img}}"></a></dd></dl>

    </li>

  </ul>

</div>

</div>

</div>

<script>

  var app = angular.module('myApp1', []);

  app.controller('myCtrl1', function($scope) {

    $scope.allGoods=[

      {

        title: '标题1',

        goods: [{

          id: '1',

          name: 'Jani',

          country: 'Norway',

          price: "1.00",

          img: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'

        },

          {

            id: '2',

            name: 'Hege',

            country: 'Sweden',

            price: "2.00",

            img: 'http://p0.meituan.net/avatar/1dff8c38406d4d6b6540c69503f409d357171.jpg'

          },

          {id: '3', name: 'Kai', country: 'Denmark', price: "3.00", img: 'http://up.qqjia.com/z/25/tu32695_9.jpg'}

        ]

      },

      {

        title: '标题2',

        goods: [{

          id: '2',

          name: 'Jani222',

          country: 'China',

          price: "6.00",

          img: 'http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs5DadIS-IAALGbQPo5ngACzkl365.jpg'

        },

          {

            id: '6',

            name: 'Sk',

            country: 'Sweden2',

            price: "5.00",

            img: 'http://cdn.duitang.com/uploads/item/201610/20/20161020070310_c5xWi.jpeg'

          },

          {

            id: '3', name: 'Kai', country: 'Denmark', price: "3.00", img: 'http://up.qqjia.com/z/25/tu32695_9.jpg'

          }

        ]

      },

      {

        title: '标题3',

        goods: [{

          id: '4',

          name: 'OOMD',

          country: 'Yuena',

          price: "63.00",

          img: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'

        },

          {

            id: '6',

            name: 'JKHD',

            country: 'MMLLD',

            price: "25.00",

            img: 'http://p0.meituan.net/avatar/1dff8c38406d4d6b6540c69503f409d357171.jpg'

          },

          {

            id: '3', name: 'Kai', country: 'Denmark', price: "3.00", img: 'http://up.qqjia.com/z/25/tu32695_9.jpg'

          }

        ]

      }

    ];

    $scope.myCurrent=0;

    $scope.toggle=function(event,indexnow){

      var clickele=angular.element(event.target);

      //angular.element(document.querySelector(".goodsone h1")).removeClass("selected");

      angular.element(document).find('h1').removeClass("selected");

     // alert(clickele);

      clickele.addClass("selected");

      $scope.myCurrent=indexnow;

    }

  });

</script>

</body>

</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. 进程间通信 System V 消息队列

    1.msgget (key_t ket,int flag) ; //创建一个新的消息队列或者访问一个已存在的消息队列 2.msgsnd(int msid, const void *ptr ,size_ ...

  2. What is the ViewPort ? Why we need it .

    See also : http://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary htt ...

  3. 常见Linux命令的介绍

    今天看到了一些Linux命令的英文全称,于是,就总结上来.通过理解英文全称,去更好的理解与记忆Linux命令. 1.ls——List 列举出当前工作目录的内容(文件或文件夹),就跟你在GUI中打开一个 ...

  4. HANA学习笔记1-搭建HANA学习环境

    一 硬件环境     两台电脑,一台为服务器装跑HANA虚拟机,一台为客户端运行HANA_STUDIO     服务器:内存至少需要16G     windows server 2003 64位    ...

  5. 启发式搜索A*算法

    A* 寻路算法 (2011-02-15 10:53:11) 转载▼ 标签: 游戏 分类: 算法 概述 虽然掌握了 A* 算法的人认为它容易,但是对于初学者来说, A* 算法还是很复杂的. 搜索区域(T ...

  6. BT协议分析(1)—1.0协议

    简述 BT下载是采用P2P的下载方式,下载的大致形式采用如下图所示,处于图示中心的称为Tracker服务器,其余称为Peer.   缺点 1.资源的安全性 2.资源的实效性(没有上传者则BT也将失效) ...

  7. android安全测试 APP要点解析

    评估思路 移动APP面临的威胁 风起云涌的高科技时代,随着智能手机和iPad等移动终端设备的普及,人们逐渐习惯了使用应用客户端上网的方式,而智能终端的普及不仅推动了移动互联网的发展,也带来了移动应用的 ...

  8. CNN 逐层可视化 Ipython Notebook

    http://nbviewer.ipython.org/github/BVLC/caffe/blob/master/examples/00-classification.ipynb

  9. 动态生成元素动作绑定，jquery 1.9如何实现

    1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类 ...

  10. Android Studio的简单设置：

    4.关闭更新: 如下图所示: 6.添加api文档悬浮提示: AS默认是没有api文档悬浮提示的,只有按住[Ctrl+Q]太会出现提示.如果要添加api的自动悬浮提示,设置如下: 上图中,在红框部分打钩 ...