Fehler beim Anzeigen der Bildvorschau in angularjs

Question

Ich arbeite mit ng-Datei-Upload, um mit Bildern zu arbeiten. In ja, ich habe zwei Möglichkeiten, um ein Bild für jeden zu laden. Bei der Anzeige wird das erste Bild in meinem ersten ng-Modell angezeigt, aber wenn ich mein zweites Bild in meinem zweiten ng-Modell anzeige, wird es nicht angezeigt, aber es ist vorbei mein erstes ng-Modell zu schreiben. Dann habe ich meine HTML-Ansicht teilen:

<div class="row"> 
    <div class="col s12 m12 hide-on-med-and-down"> 
     <div class="image-upload"> 
     <label for="file-input"> 
      <i class="material-icons left teal-text">photo_camera</i> 
      Agrega imagen 1... 
     </label> 
     <input 
      id="file-input" 
      type="file" 
      ngf-select 
      ng-model="data.imagen_promocion" 
      name="file" 
      ngf-pattern="'image/*'" 
      accept="image/*" 
      ngf-max-size="3MB" 
     /> 
     </div> 
     <img ngf-thumbnail="data.imagen_promocion || '/thumb.jpg'"/> 
    </div> 
    <div class="col s12 m12 hide-on-med-and-down"> 
     <div class="image-upload"> 
     <label for="file-input"> 
      <i class="material-icons left teal-text">photo_camera</i> 
      Agrega imagen 2... 
     </label> 
     <input 
      id="file-input" 
      type="file" 
      ngf-select 
      ng-model="data.imagen_promocion2" 
      name="file" 
      ngf-pattern="'image/*'" 
      accept="image/*" 
      ngf-max-size="3MB" 
     /> 
     </div> 
     <img ngf-thumbnail="data.imagen_promocion2 || '/thumb.jpg'"/> 
    </div> 
    </div> 

ich meine Fehler gesehen habe, ist in CSS:

.image-upload > input{ 
    display: none; 
} 
.image-upload i{ 
    font-size: 30px; 
    cursor: pointer; 
} 

Wenn ich diese CSS Stil löschen es funktioniert gut. das ist mein jsfiddle

Wie kann ich diesen Fehler beheben? Ich danke Ihnen im Voraus

Answer 1

Obwohl Ihre Geige gut funktioniert, gibt es ein Problem mit der Bezeichnung Nutzung ist:

<label for="file-input"> 
<input id="file-input"> 

Paar sollte eindeutig sein, sollten Sie nicht doppelte Paare schreiben. Es wird dort ein Problem verursachen.

Ändern Sie den Etiketten Eingang unten Stile, ich denke, es wird das Problem lösen:

<label for="file-input-1"></label> 
<input id="file-input-1"></input> 

<label for="file-input-2"></label> 
<input id="file-input-2"></input> 

Es scheint in Ordnung, wenn ich auf der Geige versucht: