angularJS将对象属性传递给模态

Question

我想将整个对象传递给模态,所以我可以在那里查看它的所有属性.现在我的项目看起来像这样:

$scope.items = [{ Title: title, Id: id }] 

在我的html页面中,我正在使用'ng-repeat',如下所示:

<tr ng-repeat="item in items | filter:search">
<td> {{item.Title}} </td>
<td> {{item.Id}} </td>
<td> <button ng-controller="ModalDemoCtrl" type="button" ng-click="viewItem(item)" class="btn btn-primary">View Item</button> </td>

和我的模态html页面:

<div class="modal-header">
  <h3>{{Title }}</h3>
</div>
<div class="modal-body">
  <p>{{ Id }}</p>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

只够看看我们是否可以获得两个值.

但我不知道我的modalController应该是什么样子,我似乎无法将整个项目(目前只有标题和id)传递给模态视图.

在制作我的控制器时,我在angular bootstrap github页面上跟随了这个例子:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.viewItem = function () {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};

$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};

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

我知道这不会起作用,此刻我无法输入我的实际控制器,今晚我会用它更新.关于如何实现这一点的任何想法？

Answer 1

如果我不需要将整个项目列表传递给您的模态,我就能正确理解您的内容,那么您应该只传递用户点击的项目.这实际上是作为参数传递给你的viewItem函数的项,所以你会有这样的东西:

$scope.viewItem = function (selectedItem) {
  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    resolve: {
      item: function () {
        return selectedItem;
      }
    }
  });
}

然后在你的模态控制器中:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, item) {
  $scope.title = item.title;
  $scope.id = item.id
});

或者,您只需将传递给模态控制器的项目分配给$scope.item变量,{{item.title}}然后{{item.id}}在HTML中使用.