AngularJS ng-repeat in modal

Question

私は問題があります - 私はテーブルのボタンをクリックするとモーダルで一人の人の詳細を表示したいと思います。しかし、私は皆の詳細を持っています。 マイコード：

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Details</h4> 
      </div> 
      <div class="modal-body"> 

       <ul ng-repeat="person in people"> 

        <li> {{person.details}}</li> 

       </ul> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

<table> 
    <thead style="background-color: lightgray;"> 
     <tr> 

      <td>Name</td> 
      <td>Gender</td> 
      <td>Details</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="person in people"> 

      <td>{{person.name}}</td> 
      <td>{{person.gender}}</td> 
      <td> 
       <button data-toggle="modal" data-target="#myModal" title="Layers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger"></span> 
       </button> 
      </td> 
     </tr> 

    </tbody> 
</table> 

マイplunker：事前に答えをhttp://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

ありがとう！

Answer 1

あなたはこの参照それを変更し、参考のために一人の詳細を表示するngRepeatで一人一人の詳細を表示している：モーダルで

http://plnkr.co/edit/CLMjfcAhNibJugivRw8N?p=preview

のように実行します。スクリプトで

<div class="modal-body"> 
     <li> {{person.details}}</li>        
</div> 

追加：

そして、上記の関数呼び出し

<button ng-click="showDetails(person)" title="Layers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger" ></span></button> 

Answer 2

モーダルテンプレートにng-repeatを追加する必要はありません。 また、jquery Bootstrapモーダルポップアップを使用していますが、これはangularjsではお勧めできません。

このJSFIDDLEリンクを参照してください。 私はこのフィドルのソリューションですべてのコードを更新しました。 私はjqueryのブートストラップを取り出して、次のコードを追加しました

角度の方法で角度UIのブートストラップを使用しています

<button ng-click="openModal(person)" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger"></span></button> 

ng-click関数を参照してください、私は人（このオブジェクトは、我々は自分自身をリピートngのからそれを得る）オブジェクトを渡していますそれに沿って以下のように実装：

$scope.openModal = function(person) { 
    console.log(person) 
    $modal.open({ 
     templateUrl: 'myModal.html', 
     backdrop: 'static', 
     controller: ['$scope', '$modalInstance', '$timeout', function($scope, $modalInstance, $timeout) { 
     $scope.personDetail = person.details; 
     $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); 
     }; 
     }] 

    }); 
    } 

その

は非常にあなたはjqueryのブートストラップではなく、角度-UI-ブートストラップを使用することをお勧めします