Jak powiązać src obrazu z ng-modelem i wyodrębnić go w Angular?

Question

Chcę powiązać źródło obrazu ze źródłem innego obrazu.

W efekcie końcowym, źródłem dużego obrazu powinna być związana z src klikniętego mniejszy (miniatur) obrazu. Czy jest to możliwe przy użyciu modelu ng?

Oto co mam

 <div> 
      <img ng-src="{{selectedImg.src}}"> 
     </div> 

     <div> 
      <ul ng-repeat="thumb in franchises"> 
       <li> 
        <img ng-src="{{thumb.images[0].list}}" ng-model="selectedImg"> 
       </li> 
      </ul> 
     </div> 

Answer 1

Można to zrobić za pomocą ng kliknij:

<div> 
    <img ng-src="{{selectedImg.src}}" alt="{{slide.images[0].list}}"> 
</div> 

<div> 
    <ul ng-repeat="thumb in franchises"> 
     <li> 
      <img ng-src="{{thumb.images[0].list}}" 
       alt="{{thumb.images[0].list}}" 
       ng-click="selectedImg.src = thumb.images[0].list" /> 
     </li> 
    </ul> 
</div> 

Ale trzeba określić selectedImg jako obiekt w kontrolerze tak:

$scope.selectedImg = {}; 

Answer 2

Aby odpowiedzieć na twoje pytanie, zgodnie z Angular Docs, możesz wiązać tylko wejścia, selekcje i obszary tekstowe za pomocą ng-m odel lub niestandardowy formant formularza.

Co prawdopodobnie chcesz zrobić to w ten sposób: (co jest tylko to, co zrobił z Saulo Lozano ng kliknięcie)

https://jsfiddle.net/4fz4nx1k/2/

<img ng-src="{{thumb.images[0].list}}" ng-click="selectedImg.src = thumb.images[0].list" > 

Tak naprawdę nie można powiązać z ng img -Model w ten sposób. Poza tym, gdybyś mógł umieścić model ng wewnątrz powtarzania ng, uzyskałbyś tę samą "wartość modelu" we wszystkich powtarzających się wartościach kolekcji ng-repeat.