将列表项名称绑定到图像答案

【问题标题】：Binding List Item Names to Images将列表项名称绑定到图像
【发布时间】：2018-09-18 16:01:52
【问题描述】：

我想列出模块中项目的名称（名称）。然后我想单击名称并加载相应的图像。第一个图像应自动加载。尝试按照这个问题进行工作，但它与缩略图有关。我相信我在 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 = {};

}]);

【问题讨论】：

标签： angularjs image

【解决方案1】：

最初你想设置第一张图片，然后在控制器中手动设置。

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

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

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

【讨论】：

我改成了
仍然没有在页面上加载图像或名称列表。