简单画廊 AngularJS

Question

我制作了一个简单的图库。 Gallery is work 但是代码很烂。我想让代码通用。我尝试用循环编写代码，但不能。请帮忙。

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')));
})

谢谢，抱歉我的英语不好。

Answer 1

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>

简单画廊 AngularJS

Simple Gallery AngularJS

html

javascript

angularjs

jqlite