显示数据绑定的bs模式窗口到角度ng重复

Show data bound bs modal window to angular ng-repeat

本文关键字：ng 重复 窗口 数据绑定 bs 模式 显示      更新时间：2023-09-26

我是angular的新手，所以这肯定是一个基本问题。

我想使用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重复设置类似

  <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重复中说出所选项目的模态？

再次抱歉，如果这是基本的东西，我就是不能用引导模式窗口来理解它。

我建议使用angular ui引导程序，而不是jQuery版本（如果您已经使用了，请继续并忽略此行）。

然后。。。

我需要在ng repeat中包含我的模态html吗？或者它可以只添加一次到我的视图中吗

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

如何从ng重复中说出所选项目的模态？

你的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>
相关文章：