Привязка имен элементов списка к изображениям

Question

Я хочу перечислить названия предметов в модуле (имя).Затем я хочу щелкнуть имя и загрузить соответствующее изображение.Первое изображение должно загрузиться автоматически.Попытался выполнить этот вопрос, чтобы он заработал, но он связан с миниатюрами.Я считаю, что мне не хватает некоторого кода в разделе ng-repeat.Спасибо!

Как связать источник изображения с ng-моделью и извлечь его в 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]"