angularjsで画像のプレビューを表示する際にエラーが発生しました

Question

イメージを操作するためにng-file-uploadを使用しています。はい、私はそれぞれのために画像をアップロードする2つのオプションがあります。最初のイメージを表示するときは、最初のngモデルで表示されますが、2番目のイメージを2番目のngモデルに表示すると、表示されませんが、最初のngモデルが書き込まれます。私は私のエラーを見ている

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

がCSSである：私はこのCSSスタイルを削除すると

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

はそれが正常に動作し、私は私のHTMLビューを共有しています。これは私ですjsfiddle

どうすればこのエラーを修正できますか？ペアはユニークである必要があり

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

、あなたは二重のペアを書くべきではありません：あなたのフィドルが正常に動作しますが、私は、ラベルの使用に問題がある、事前

Answer 1

でお願いします。そこに問題が発生します。

変更スタイル以下にラベル入力、私はそれが問題を解決すると思います：私はあなたのフィドルにしようとしたとき

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

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

それは罰金だ：