angular 实现tab切换(循环输出tab标题及tab下属内容,非direct,非include)
<!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)的更多相关文章
- angular绑定数据 使用循环输出列表数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)
Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...
- Tab切换类型
Tab切换类型 点击Tab 滑过Tab 延迟Tab CSS样式 ; ; list-style:none; font-size:12px;} .notice{width:298px; height:98 ...
- echarts tab 切换问题整理
一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...
- 关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看
scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- jquery TAB切换小插件
//tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...
- Angular——tab切换案例
基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...
- angular.js实现二级tab切换
<div class="guide-type"> <h3 ng-class="{true:'active', false:''}[tab == 'pc' ...
随机推荐
- window10的优缺点
windows10的体验随笔 为了体验科技前沿,前段时间升级了windows10 优点: 首先换了windows10就回不去了, 1.开始菜单的回归是众向所归,而且也加了迷你的一些菜单元素,值得称 ...
- CoreJava学习笔记1-基本概念、对象和类
一. java的基本程序设计结构 (一) java共有8种基本类型:4种整型,2种浮点类型,1种char,1种boolean. 1) 4种整型:byte(1).short(2). ...
- maya的卡通渲染
为了统一工作流,给maya也做了个卡通shader:
- mysql登录不了及修改密码
安装mariadb,默认是无密码的,但一般是指要设置密码的.在设置密码时出现各种问题,可能还是不太明白其原理. 一下我尝试了两种方法,但都失败了.下面这两个是我尝试的方法: 一.网上最多的方法是 1. ...
- Python学习感悟
学习任何新知识,我自己偏向于在实践中学习,这样效率更高:如果只是学习基本概念,会很枯燥. 现在的问题是:不是所有的新知识都可以在实践中学习!
- Implement Trie (Prefix Tree)
Trie 树实现 Implement a trie with insert, search, and startsWith methods. class TrieNode { public: // I ...
- C++的学习资源
本文总结了几个好的C++网站,以及C++方面的经典书籍.所列书籍或标准可以到这里找找电子版. wikipedia关于C++有关条目,注意看后面“参考文献”和“外部链接”: C++ programmin ...
- lua userdata
#define metatablename "studentlib.06-11-11" /** * utility functions */ static int pusherro ...
- AIX上通过IPSEC进行IP包过滤
AIX上的IPSEC 在AIX可以通过以下步骤打开IP Security smitty ipsec4 --> Start/Stop IP Security --> Start IP Sec ...
- 【转】以 java 为例,总结下 appium 里的一方法的使用心得
转自:http://testerhome.com/topics/1043 1.关于没有name,没有ID的元素的定位---通用篇解题思路:因为没有name,id:其实剩下的选择已不多,要么xpath, ...