Wie bindet man die Quelle eines Bildes an das ng-Modell und extrahiert es in Angular?

Question

Ich möchte die Quelle eines Bildes an die Quelle eines anderen Bildes binden.

Im Endergebnis sollte die Quelle des großen Bildes auf die src des angeklickten kleinen (Thumbnail) Bildes gebunden werden. Ist das mit ng-Modell möglich?

Hier ist, was ich

 <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

Sie es tun könnte ng Klick mit haben:

<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> 

Aber Sie haben selectedImg als Objekt in Ihrem Controller wie folgt zu definieren:

$scope.selectedImg = {}; 

Answer 2

Um Ihre Frage zu beantworten, können Sie laut Angular Docs nur Eingänge, Selects und Textareas mit ng-m verknüpfen oder eine benutzerdefinierte Formularsteuerung.

Was möchten Sie wahrscheinlich ist, dies zu tun:

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

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

(was genau das, was mit ng-Klick tat Saulo Lozano ist)

So kann man nicht wirklich ein img mit einem ng binden -Modell so. Wenn Sie ein ng-Modell in eine ng-Wiederholung einfügen könnten, würden Sie in allen wiederholten Werten der ng-repeat-Sammlung den gleichen "Modellwert" erhalten.