Question

我正在使用bootstrap和Angularjs 1.5X为本地房屋建筑商设置图库视图。对于图库视图，我想在一侧显示缩略图图像列表，然后在另一侧显示完整图像。我的问题是我试图调用一个数组中的图像，这个数组也在第一个数组中的另一个数组内，就像这样。

app.controller('ImageController', function () {
        this.images = gallerys;
    });

    app.controller('GalleryController', function () {
            this.current = 0;
            this.setCurrent = function (newGallery) {
            this.current = newGallery || 0;
        };
    });     
var gallerys = [{
            images: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    }]
        },{
            images: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    },

我想重复第一个图像数组中的所有拇指图像。我想在不同的页面上使用每个图像数组。这就是我的代码在HTML视图中的样子。

<div class="content" ng-controller="ImageController as image">
  <div class="col-md-8">
    <div ng-controller="GalleryController as gallery">
      <div ng-repeat="image in image.images">
        <img class="img-full || img-responsive" ng-src="{{image.images[gallery.current].full}}">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="img-thumb" ng-controller="GalleryController as gallery">
      <li ng-repeat="image in image.images">
        <img ng-src="{{image.images[0].thumb}}">
      </li>
    </ul>
  </div>
</div>

我有一个这个网站的演示，如果这有助于任何人。 http://demo.ranlife.com/beaconhomes2/monson.php

Answer 1

您有几个名称冲突，例如image和images，这不会导致问题，但很难理解引用的内容。尝试这样的事情：

app.controller('ImageController', function () {
    this.gallerys = gallerys; // Renamed images to gallerys inside ImageController
});

...

<div class="content" ng-controller="ImageController as imageScope">
  <div class="col-md-8">
    <div ng-controller="GalleryController as gallery">
      <div ng-repeat="image in imageScope.gallerys[gallery.current].images">
        <img class="img-full || img-responsive" ng-src="{{image.full}}">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="img-thumb" ng-controller="GalleryController as gallery">
      <li ng-repeat="image in imageScope.gallerys[0].images">
        <img ng-src="{{image.thumb}}">
      </li>
    </ul>
  </div>
</div>

Answer 2

这适用于您当前的控制器：

<div class="content" ng-controller="ImageController as image">
  <div class="col-md-8">
    <div>
      <div ng-repeat="image in image.images">
        <div ng-repeat="image in images.images">
            <img class="img-full || img-responsive" ng-src="{{image.full}}">
        </div>
      </div>
   </div>
  <div class="col-md-4">
    <ul class="img-thumb">
      <li ng-repeat="image in image.images">
         <div ng-repeat="thumbnail in image.images">
            <img ng-src="{{image.thumb}}">
         </div>
      </li>
    </ul>
  </div>
</div>

您将控制器中的图库称为图像，然后将ng-repeat中的变量命名为图像，这是非常令人困惑的。为清楚起见，请尝试以下方法：

将您的控制器更改为：

app.controller('ImageController', function () {
        this.gallery= gallerys;
 });

你的标记为：

<div class="content" ng-controller="ImageController as imageCtrl">
  <div class="col-md-8">
    <div>
      <div ng-repeat="gallery in imageCtrl.gallery">
        <div ng-repeat="image in gallery.images">
            <img class="img-full || img-responsive" ng-src="{{image.full}}">
        </div>
      </div>
   </div>
  <div class="col-md-4">
    <ul class="img-thumb">
      <li ng-repeat="gallery in imageCtrl.gallery">
         <div ng-repeat="image in gallery.images">
            <img ng-src="{{image.thumb}}">
         </div>
      </li>
    </ul>
  </div>
</div>

此外，将您的图库对象更改为：

var gallerys = [{
            gallery: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    }]
        },{
            gallery: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    },

<强>被修改

要在缩略图上单击一次仅显示一个完整图像，请将控制器更改为：

app.controller('ImageController', function () {
        this.gallery= gallerys;
        this.activeImage = null;
 });

通过在ng-repeat中调用ng-click来设置标记上的活动图像，如下所示：

<li ng-repeat="gallery in imageCtrl.gallery">
    <div ng-repeat="image in gallery.images">
        <img ng-src="{{image.thumb}}" ng-click="imageCtrl.activeImage = image.full">
    </div>
</li>

其他地方只需在控制器中显示activeImage，如下所示：

 <img ng-src="{{imageCtrl.activeImage}}">

Angularjs中Array库中的数组

2 个答案: