AngularJS 模态中的 ng-repeat

Question

我有问题 - 我想在单击 table 中的按钮时在模式中显示一个人的详细信息。但我有每个人的详细信息。我的代码：

<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>

我的笨蛋：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>

在脚本中添加：

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

并将上述函数调用为：

  <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 link。我已经用这个 fiddle 中的解决方案更新了你所有的代码。我删除了 jquery bootstrap 并在 angular 中使用了 angular ui bootstrap

添加了以下代码：

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

查看 ng-click 函数，我正在传递 person（我们从 ng-repeat 本身获取的这个对象）对象以及它并实现如下：

$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');
        };
      }]

    });
  }

强烈建议您使用angular-ui-bootstrap而不是jquerybootstrap

AngularJS 模态中的 ng-repeat

AngularJS ng-repeat in modal

twitter-bootstrap

angularjs

angularjs-ng-repeat