Question

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

vh

在我的html页面中，我正在使用＆＃39; ng-repeat＆＃39;，类似这样的内容：

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

和我的模态html页面：

<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>

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

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

在制作我的控制器时，我已经在angular bootstrap github页面上执行了示例：

<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>

我知道这不行，我现在无法输入我的实际控制器，今晚我会用它更新。关于如何实现这一点的任何想法？

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变量，然后在HTML中使用{{item.title}}和{{item.id}}。

Answer 2

我认为您不需要创建另一个控制器，您可以使用当前的控制器。并显示带有指令ng-show或ng-if的模态窗口。没有必要为一个视图使用两个控制器。一个控制器 - 一个视图。

如果你想创建模态窗口并在项目的不同部分使用它，你可以创建指令并使用它来创建应用程序的模态窗口。

Answer 3

创建Items函数时，我会传递一个对象，然后你可以在模态ctrl中调用它，如下所示：

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 myItems: $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.myItems;
$scope.selected = {
item: $scope.items[0]
};

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

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

我这样在我的应用中工作。希望它有所帮助

angularJS将对象属性传递给模态

3 个答案: