Question

我是棱角分明的新人，所以这是一个基本问题。

我想使用ng-repeat来渲染一些html，并且还需要在重复项目中使用一个按钮来显示一个bs模态窗口，显示有关所选项目的完整详细信息。

让我说我的模态窗口非常基本，如

<div id="bs-modal-create" class="modal" ng-model="detail">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3 class="semibold modal-title text-primary"Details</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" action="" id="wizard">

                <div class="form-group">
                    <label class="control-label col-md-2" for="Title">Title</label>
                    <div class="col-md-10">
                        <input class="form-control" id="Title" name="Title" placeholder="" type="text" value="" ng-model="title">
                    </div>
                </div>
        </div>
</div>
</div>

我的ng-repeat设置如

  <li class="wrapper" data-ng-repeat="detail in vm.details">
      {{detail.name}} <a href="#" class="btn btn-default" ng-click="someModalWindow()">See full details</a>
  </li>

我是否需要在ng-repeat中包含我的模态html，或者只能在我的视图中添加一次。如何告诉ng-repeat中所选项目的模态？

再次抱歉，如果这是基本的东西，我只是不能用引导模态窗口绕过它。

Answer 1

我建议使用angular-ui-bootstrap而不是jQuery版本（如果已经使用，请继续并忽略此行）。

则...

我是否需要在ng-repeat中包含我的模态html，或者只能在我的视图中添加一次

不，您可以将其定义为模板一次，然后它将获得它自己的$scope

如何从ng-repeat告诉模态所选项目？

您的ng-repeat项ng-click如下所示：ng-click="someModalWindow(detail)"

然后在你的控制器内，你会有类似的东西：

$scope.someModalWindow = function(detailItem) {
  var modalInstance = $modal.open({
      templateUrl: 'modalTemplate',
      controller: ModalController,
      resolve: {
         detailItem: function () {
            return detailItem;
         }
      }
  });

  modalInstance.result.then(function (detailItem) {
    // this is returned from the `$scope.ok` function in ModalController
  }, function () {
    console.log('dismissed');
  });
}

您还需要定义ModalController

var ModalController = function ($scope, $modalInstance, detailItem) {
  $scope.detailItem = detailItem;

  $scope.ok = function () {
    $modalInstance.close($scope.detailItem); // If you want to return something back to the caller
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

最后，你的标记：

<script type="text/ng-template" id="modalTemplate">
    <div class="modal-header">
        <h3 class="modal-title">Header</h3>
    </div>
    <div class="modal-body">
        {{detailItem}}
    </div>
    <div class="modal-footer">
        <button ng-click="ok()">OK</button>
        <button ng-click="cancel()">Cancel</button>
    </div>
</script>

显示数据绑定bs模态窗口到角度ng-repeat

1 个答案: