AngularJS ng-repeat in modal

我有問題 - 我想在模式中顯示一個人的詳細信息，當我點擊表格中的按鈕時。但我有每個人的細節。我的代碼：AngularJS ng-repeat in modal

<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

感謝答案提前！

來源

2017-08-17 bafix2203

您顯示每個人的用ngRepeat細節改變和參照顯示單人詳細看到這一點：

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

在模態做的：

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

在腳本中添加：

$scope.showDetails = function(person){ 
      $scope.person = person; 
      $('#myModal').modal('show'); 
    }

並調用上述func作爲：

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

來源

2017-08-17 06:01:24 Jenny

模態模板中沒有必要添加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'); 
     }; 
     }] 

    }); 
    }

它強烈建議你應該使用角UI的引導，而不是jQuery的引導

來源

2017-08-17 06:05:30 Rahul

AngularJS ng-repeat in modal

回答

相關問題