Angularはtab切替を実現する(tabタイトルおよびtab下位コンテンツ、非direct、非includeを循環出力する)
6401 ワード
<!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>