ng-repeatの角度更新ng-model

基本的に、選択された値（例えばモーダルから）を特定のモデルに戻す方法を見つけようとしています。そのモデルがng-repeat 。ng-repeatの角度更新ng-model

だからこれは私のデータは次のようになります。

{ 
    "title": "Example Title", 
    "enabled": true, 
    "thumbnailImage": "file1.png", 
    "content": [{ 
     "order": 0, 
     "type": "wysiwyg", 
     "content": "<div>This is wysiwyg content!</div>" 
    }, 
    { 
     "order": 1, 
     "type": "image", 
     "content": "file2.png" 
    }], 
    "id": 1 
}

今、ユーザーは、「コンテンツ」のアレイにそれらの選択型の新しいオブジェクトを追加]ボタンをクリックして、追加コンテンツを生成維持することができます。そのため、記事には1つのコンテンツイメージ、つまり百もあるしないかもしれません（ただし、常に「thumbnailImage」があります）。

https://github.com/nervgh/angular-file-uploadを使用して、ユーザーが新しい画像ファイルをアップロードするか、サーバーから既存の画像を選択できるモードを追加しました。

<div class="Control"> 
    <label>Content</label> 
    <div class="panel panel-default" ng-repeat="block in article.content"> 
    <div class="panel-body"> 
     <!-- ... other content types here ... --> 
     <div ng-if="block.type == 'image'"> 
     <input type="text" 
       ng-model="block.content" 
       ng-if="block.type == 'image'" 
       class="form-control" 
     > 
     <a ng-click="selectImage()" class="btn btn-primary">Select image</a> 
     <button type="button" ng-if="!!activeImage" ng-click="block.content = activeImage" class="btn btn-secondary">Insert image</button> 
     </div> 
    </div> 
    </div> 
</div>

selectImage（）、モーダルを開き、既にサーバーにアップロードするすべてのファイルを移入し、持っている： - だから私のHTMLは（thumbnailImageにのための同様のNGリピートコンテンツのための）このようなビットに見えますユーザーが新しい画像をアップロードできるドラッグアンドドロップセクション。

モーダルは次のようになります。私が何をしようとしています何

<div ng-if="showFileManager" nv-file-drop uploader="uploader"> 
    <div class="row"> 
     <div ng-repeat="file in files" class="col-3"> 
      <img ng-src="/{{ file.container }}/{{ file.name }}" ng-click="setActiveImage(file)"> 
     </div> 
    </div> 
    <div ng-show="uploader.isHTML5"> 
     <div nv-file-over uploader="uploader"> 
      Drag and drop images to upload 
     </div> 
    </div> 
</div>

は、画像を選択する上で、即座に「selectImage（）」ボタンに関連したテキスト入力を取り込みます。

$scope.setActiveImage = function(file) { 
     var filePath = 'http://localhost:3000/uploads/' + file.container + '/' + file.name; 
     $scope.activeImage = filePath; 
    };

そして各画像の下に次の「画像を選択」ボタンへの「挿入画像」ボタンがモデルを更新：ある画像火災クリックする瞬間

、「setActiveImageを（）」、。しかし、私はモーダルでそれを行うことができるようにするために、すべてのユーザーが行う必要があるので、 '閉じる'モーダルボタンをクリックし、フィールドが入力されています。

これは意味がありますか？

出典

2016-07-21 Ben

は、モーダルすでに画像を表示するように動作していますか？それはそれ自身のコントローラを持っていますか？ – charlietfl

はい。私は自分自身を混乱させるだけでなく、必要以上に難しくしていたと思っています。以下のジンの解決策は完全に機能します。 – Ben

ng-repeatの特定の項目を取得する方法は、それを私のビュー内の関数に渡すことです。

コントローラ内で次に

<html element ... useSelectedFile(file)></html element>

：

$scope.useSelectedFile = useSelectedFile; 

function useSelectedFile(file){ 
    //do stuff 
    //call function 
    //set scope item in view to file 
}

出典

2016-07-21 02:18:49 Jinw

Doh、私はそれを思い描いていました。はい、それは完全に動作します。ありがとう、Jinw – Ben

あなたはようこそ！私もコードを複雑にするので、やりやすいです。 – Jinw

ng-repeatの角度更新ng-model

答えて

関連する問題