简单的画廊Angularjs

我做了一个简单的画廊。画廊是工作的,但代码非常糟糕。我想使代码通用。我试图用循环进行代码,但不能。请帮忙。

html:

<ul class="catalog">    <li><img src="1.png"></li>    <li><img src="2.png"></li>    <li><img src="3.png"></li></ul><div class="main">    <img src="1.png"></div>

JS:

var main = angular.element(document.querySelector(".main"))var catalog = angular.element(document.querySelector(".catalog"));var catlalogItems = catalog.find("img"); var firstItem = catlalogItems.eq(0)firstItem.on('click',function(){    main.attr('src',(firstItem.attr('src')));}); var secondItem = catlalogItems.eq(1)secondItem.on('click',function(){    main.attr('src',(secondItem.attr('src')));}) var thirdItem = catlalogItems.eq(2)thirdItem.on('click',function(){    main.attr('src',(thirdItem.attr('src')));})

谢谢,对不起,我的英语不好。

app.js

(function () {  angular.module('app', []);}());

app.html

<image-gallery></image-gallery>

图像 – gallery.js

(function () {  var imageGallery = {    constroller: function () {      this.urls = ['1.png', '2.png', '3.png'];    },    templateUrl: './images-template.html'  };   angular.module('app')    .component('imageGallery', imageGallery)}()); 

图像gallery.html

<ul class="catalog">    <li ng-repeat="url in $ctrl.urls">      <img ng-src="url" ng-click="$ctrl.selectedUrl = image">    </li></ul><div class="main">    <img ng-src="$ctrl.selectedUrl"></div>

本文链接:https://xdcnz.com/10637.html