Question

我试图把一个表格置于一个会打开一个模态的表格中。但无论我点击哪个按钮，它似乎都试图多次打开它。我把openModal和closeModal放在主控制器中。我相信问题可能是因为我在ng-repeat中使用它？但无论如何我不知道出了什么问题。我究竟做错了什么？我正在使用这种模式：

http://angular-ui.github.io/bootstrap/#/modal

html代码：

<div class="row">
    <div class="span4" ng-repeat="court in courts"> 
      <table class="table table-condensed table-bordered table-hover">
        <caption><h4>court {{court.records[0].id}}<h4></caption>
        <tr>
          <th style='text-align:center'>Hour</th>
          <th style='text-align:center'>Player 1</th>
          <th style='text-align:center'>Player 2</th>
          <th></th>
        </tr>
        <tr ng-repeat="record in court.records">
          <td width="50" >{{record.hour}}</td>
          <td ng-style="user1Payed(record)" style='text-align:center'>{{record.u1_first}} {{record.u1_last}}</td>
          <td ng-style="user2Payed(record)" style='text-align:center'>{{record.u2_first}} {{record.u2_last}}</td>
          <td> <!-- options button -->
            <button class="btn" ng-click="openModal()">Open me!</button>
            <div modal="shouldBeOpen" close="closeModal()" options="opts">
                <div class="modal-header">
                    <h3>I'm a modal!</h3>
                </div>
                <div class="modal-body">
                    <ul>
                        <li ng-repeat="item in items">{{item}}</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning cancel" ng-click="closeModal()">Cancel</button>
                </div>
            </div>
          </td> <!-- options button end -->
        </tr> 
      </table>
    </div>
</div>

和控制器代码：

function CourtsController($scope, $window, $http, CourtsService, $timeout) { 
  $scope.openModal = function () {
    $scope.shouldBeOpen = true;
  };

  $scope.closeModal = function () {
    $scope.closeMsg = 'I was closed at: ' + new Date();
    $scope.shouldBeOpen = false;
  };

 $scope.items = [
            "Guest Payment",
            "Member Payment",
            "League (no payment)",
            "no Payment"
          ];

  $scope.opts = {
    backdropFade: true,
    dialogFade:true
  };

Answer 1

移动ng-repeat的模态div并根据openModal()设置$ scope变量。

ng-repeat指令内的模态会导致崩溃

1 个答案: