Question

我想列出模块中各项的名称（名称）。然后，我想单击名称并加载相应的图像。第一张图像应自动加载。尝试按照此问题进行操作，但这与缩略图有关。我相信我在ng-repeat部分中缺少一些代码。谢谢！

How to bind the src of an image to ng-model and extract it in Angular?

HTML

<div ng-controller ="DemoController as main">

  <div>
  <img ng-src="{{selectedImg.src}}" />
  </div>
  <ul>
    <li ng-repeat="cat in main.cats">

        <img ng-src="{{cat.images[0].name}}"
        ng-click="selectedImg.src = cat.images[0].name"/>
        </li>
     </div>
   </ul>
</div>



   JS

angular.module('myApp',[]);

angular.module('myApp').controller('DemoController',
['$scope',function($scope) {

this.cats = [

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg'
   },
   {
     name: 'Tabby',
     images: 'images/tabby.jpeg'
   }
  ];
$scope.selectedImg = {};

}]);

Answer 1

首先要设置第一张图像，然后在控制器内手动进行设置。

$scope.selectedImg = this.cats.image[0];

并更改ng-click以分配cat.images[0]的整个对象

ng-click="selectedImg= cat.images[0]"

将列表项名称绑定到图像

1 个答案: