angular 实现tab切换(循环输出tab标题及tab下属内容,非direct,非include)

发布时间:2017-3-26 1:23:49 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"angular 实现tab切换(循环输出tab标题及tab下属内容,非direct,非include) ",主要涉及到angular 实现tab切换(循环输出tab标题及tab下属内容,非direct,非include) 方面的内容,对于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>

上一篇:基于jquery的消息提示框toastr.js
下一篇:git常用指令

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款