如何根据单击的项目在modalbox中获取值

How to get a value inside modalbox based on the item that is clicked

本文关键字：modalbox 获取 项目 何根 单击      更新时间：2023-09-26

我的页面上有几个按钮。对于每个按钮，我都要打开一个模式框。但是，在modalbox内部，数据将根据单击的按钮进行填充。因此，我需要一种方法来在模态框中使用单击项的值。

我该怎么做？

这是我试过的。

HTML

<button class="btn btn-default" ng-click="open(0)">Open w/ index 0</button>
<button class="btn btn-default" ng-click="open(1)">Open w/ index 1</button>
<button class="btn btn-default" ng-click="open(2)">Open w/ index 2</button>

JS-

  $scope.open = function (index) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }, 
        index: function() {
          return index;
        }
      }
    });
    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

模式HTML

<h3 class="modal-title">I'm a modal! w/ index {{index}}</h3>

这是一个工作示例的Plnkhttp://plnkr.co/edit/m65ATdiSdAUGxj69GgSV?p=preview

如果你想使用resolve选项传递的索引var，你必须将var作为参数添加到模式窗口的控制器中，如下所示：

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, index) {

您可以使用该var来定义$scope var，就像使用$scope.items一样。

$scope.items = items;
$scope.index = index;

Angular UI文档中描述了这种技术：

resolve-将被解析并作为本地人传递给控制器的成员；

Plnk：http://plnkr.co/edit/6R8926rLxRzxDmVbNVsX?p=preview

相关文章：