是否可以将值从 ng.repeat 传递到 javascript 函数？

Question

我有这个部分：

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    <td>{{data.name}}</td>
                    <td>{{data.price}}</td>
                    <td>{{data.img}}</td>

<script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3 dir="rtl" align="center">screenshot</h3>
                    </div>
                    <form ng-submit="submit()">
                      <div class="modal-body">
                        <img ng-src="{{data.img}}">
                      </div>
                      <div class="modal-footer">
                          <button class="btn btn-warning" ng-click="cancel()">close</button>
                      </div>
                    </form>
                </script>
                    <button ng-click="open()">open</button>

实际上，它不会将值从 {{data.img}} 传递到 javascript，后者会打开模态 window。有什么想法吗？

谢谢！！

Answer 1

我看到你已经标记了 bootstrap-modal，所以我假设你正在使用一个。

您需要在打开模态时使用解析键将变量传递给模态。模态的演示应该有那个。

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

在模态控制器上，您将变量作为服务获取

controller('ModalInstanceCtrl', function ($scope, $modalInstance, items)

然后将其分配给范围变量，以便您的模态模板可以看到它

$scope.items = items;

评论中提供了网站：

var ModalDemoCtrl = function ($scope, $modal) {
    $scope.open = function () {

    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'full',
        controller: function ($scope, $modalInstance, data) {
            $scope.data = data;
            $scope.cancel = function () {
                $modalInstance.dismiss('סגור');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            }
        }
    });
};

Answer 2

I think to properly solve this you'll need to pass in the column reference into the modal, else we can't determine which image to show.

$scope.open = function (imageKey) {
    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'full',
        controller: function ($scope, $modalInstance, data, imageKey) {
            $scope.data='';
            $scope.data = data;

            $scope.getImage = function () {
                return $scope.data[imageKey];
            }

            $scope.cancel = function () {
                $modalInstance.dismiss('סגור');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            },
            imageKey: function() {
                return imageKey;
            }
        }
    });
}

On template (pass in the key you want to use):

<button ng-click="open('dioPlusImage')">פתח צילום מסך</button>

On modal template:

<img ng-src="{{getImage()}}>"

是否可以将值从 ng.repeat 传递到 javascript 函数？

is it possible to pass value from an ng.repeat to a javascript function?

javascript

angularjs

bootstrap-modal