0

ページに複数のflow-btn要素があります。ユーザーが単一のファイルを (個別に) 直接アップロードできるアイテムのリストがあります。または、リストに自動的に入力される複数のファイルをアップロードすることを選択できます。すべてが の中にありflow-initます。

この疑似コードの例に少し似ています:

<div flow-init>
    <div flow-btn>Upload multiple images to fill the list</div>
    <h3>The list</h3>
    <ul>
        <li ng-repeat="item in items">
            <div flow-btn flow-single-file>Upload an image for this item</div>
            <img flow-img="item.flowFile">
        </li>
    </ul>
 </div>

flow-btnアップロードされた画像のサムネイルを正しい位置に表示できるように、リスト内で使用されたものを特定する必要があります。item基本的にフローイベントからアクセスしたいと考えています。

注:リスト ループ データは他のデータによって定義されるため、ループし$flow.filesてリストを作成することはできません。

これどうやってするの？

flow-initループ項目ごとに新しいインスタンスを作成する必要がありますか? やり過ぎ？

編集:または、おそらく、for each項目flow-btnを持つのではなく、プログラムでコントローラーから複数を開くことができflow-btnますか?? その場合、現在のアイテムをコントローラーに隠しておくことができます。

4

1 に答える 1

0

編集。08.2015 firefox でこれをもう一度確認したところ、入力要素が event.srcElement 内ではなく、event.originalTarget 内に隠されているようです。コードとplnkrを更新しました。

おそらくご存知のように、ng-flow はイベントを提供します。これらのイベントに関数を渡し、クリックした特定のボタンを参照する $event オブジェクトを挿入できます。あなたの場合、flow-files-submittedをリッスンし、 $event.srcElementに基づいて、次のような適切なアクションを実行できます。

HTML

<div flow-init flow-files-submitted='handleUpload($files, $event, $flow)'>
     <div flow-btn>Upload multiple images to fill the list</div>
     <h3>The list</h3>
     <ul>
        <li ng-repeat="item in items">
            <div flow-btn flow-single-file>Upload an image for this item</div>
            <img flow-img="item.photo" ng-if='item.photo'>
        </li>
    </ul>
</div>

JS

$scope.handleUpload =  function($files, $event, $flow) {
 if(($event.srcElement !== undefined)&&($event.srcElement !== null))
  var input = angular.element($event.srcElement)
 else
  var input = angular.element($event.originalTarget)
 if (input.scope().item) {
  if(input.scope().item.photo) {
    input.scope().item.photo.cancel();
  }
  input.scope().item.photo = $files[0];
 } else {
   for(var i = 0; i < $files.length; i++) {
     $scope.items.push({photo: $files[i]});
   }
 }
};

問題の解決策については、このプランカーをチェックしてください

于 2015-08-21T10:35:39.997 に答える