<!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{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>