ng-repeatから別の要素にアイテムを渡す方法や参照する方法はありますか？

Question

Iが同じコントローラコンテキスト内（この場合モーダル）別の要素にリピータから単一のアイテム/オブジェクト（「CA」）を渡したい：

<div data-ng-controller="ContactActionCtrl" data-ng-app="myApp" runat="server"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <h2>Tasks</h2> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Created</th> 
        <th>Due</th> 
        <th>Completed</th> 
        <th>Created By</th> 
        <th>Assigned</th> 
        <th>Description</th> 
       </tr> 
      </thead> 
      <tbody data-ng-repeat="ca in contactactions | filter:{ObjectType:'Task'}"> 
       <tr data-actionid="{{ca.Id}}" data-toggle="modal" data-target="#actionDetail"> 
        <td>{{ca.CreationDate | date:"MM/dd/yyyy"}}</td> 
        <td>{{ca.ActionDate | date:"MM/dd/yyyy 'at' h:mma"}}</td> 
        <td>{{ca.CompletionDate | date:"MM/dd/yyyy"}}</td> 
        <td>{{ca.CreatedByUsername}}</td> 
        <td>{{ca.UserIDUsername}}</td> 
        <td><label data-ng-if="ca.ActionType">{{ca.ActionType}} - </label><label>{{ca.ActionDescription}}</label><br>{{ca.CreationNotes | limitTo:270}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    </div> 
    <div id="actionDetail" class="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">{{ca.ActionDescription}}</h4> 
      </div> 
      <div class="modal-body"> 
       //more details from ca here 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

すべてが機能しています行のクリックからブートストラップモーダルdivをポップアップすることを含みますが、実際にはリピータの外側からポップすることはありません。完全なオブジェクトがまだメモリに残っているので、モーダルを埋めるために、別のサービスコールを使用してdbから単一のアイテムを再度フェッチしないようにしたいと考えていました。私はモーダルを示していますが、この質問はリピータの外側にある要素/要素のセットに適用されると思います。

Answer 1

私はあなたのための最も単純な方法は、モーダル表示に異なる単一の変数を持たせることだと思います。 'ca.selectedItem'をクリックすると、itemをクリックしてselectedItemにそのオブジェクトを設定します。私は例を挙げることができるかどうかを見ていきます。

コントローラー：

$scope.contactActions = [{name:"Action 1"},{name:"Action 2"},{name:"Action 3"}] 
$scope.selectedAction = {name:""}; 

$scope.rowClick = function(event, selected) { 
    $scope.selectedAction = selected; 
}; 

マークアップ：

<tr data-actionid="{{ca.Id}}" ng-click="ca.rowClick($event, i)" data-toggle="modal" data-target="#actionDetail"> 

はここ plunkです。

P.S.あなたはAngularを使ってブートストラップを使うことができますが、角度のないjavascript（つまりjquery）を使ってAngularをバイパスし、DOM操作のようなことをします。これはしばしばAngularのバインディングを正しく更新しないので、$ scope.apply（）のようなことをして、手動でAngularにすべてのバインディングを更新するよう指示します。これに代わる方法の1つは、同じCSSを使用するUI Bootstrapを使用することですが、javascriptはAngularで再実装されています。