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>

我的傻瓜：http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

提前感谢您的回答！

Answer 1

无需在模态模板中添加ng-repeat。你也在使用jquery Bootstrap模态弹出窗口，不建议在angularjs中使用。

请参阅此JSFIDDLE链接。我已经用这个小提琴中的解决方案更新了所有代码。我已经删除了jquery bootstrap并以角度方式使用了角度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而不是jquery bootstrap

Answer 2

您正在使用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>

模态

2 个答案: