Can values be transferred from an ng-repeat to a JavaScript function?

Question

Can values be transferred from an ng-repeat to a JavaScript function?

I am facing an issue with this segment:

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

When attempting to pass the value from {{data.img}} to the JavaScript function that triggers a modal window, it is not working correctly. Do you have any solutions or suggestions?

Thank you!

javascript angularjs bootstrap-modal

Answer 1

Answer №1

In order to properly address this issue, it is essential to pass the column reference into the modal. Otherwise, we will not be able to determine which image should be displayed.

$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('Close');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            },
            imageKey: function() {
                return imageKey;
            }
        }
    });
}

In the template (provide the key you wish to use):

<button ng-click="open('dioPlusImage')">Open Screenshot</button>

In the modal template:

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

Answer 2

In order to properly address this issue, it is essential to pass the column reference into the modal. Otherwise, we will not be able to determine which image should be displayed.

$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('Close');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            },
            imageKey: function() {
                return imageKey;
            }
        }
    });
}

In the template (provide the key you wish to use):

<button ng-click="open('dioPlusImage')">Open Screenshot</button>

In the modal template:

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

Answer 3

Answer №2

It seems like you have included the bootstrap-modal tag, indicating that you are using a modal.

To pass a variable into the modal, you can utilize the resolve key when opening the modal. Make sure the modal demo includes this step.

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

In the modal controller, you can access the variable as a service.

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

Assign the variable to a scope variable in order for it to be accessible in your modal template.

$scope.items = items;

Based on the website mentioned in the comment:

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('Close');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            }
        }
    });
};

Answer 4

It seems like you have included the bootstrap-modal tag, indicating that you are using a modal.

To pass a variable into the modal, you can utilize the resolve key when opening the modal. Make sure the modal demo includes this step.

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

In the modal controller, you can access the variable as a service.

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

Assign the variable to a scope variable in order for it to be accessible in your modal template.

$scope.items = items;

Based on the website mentioned in the comment:

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('Close');
            };
        },
        resolve: {
            data: function() {
                // access outer controller scope by using $scope.$parent
                return $scope.$parent.data;
            }
        }
    });
};

Can values be transferred from an ng-repeat to a JavaScript function?

Answer №1

Answer №2

Similar questions

What is the best method for extracting a value from a JSON file within an array using electron and node.js?

Improving the pagination performance in AngularJS

Utilizing AngularJS to Intercept Route Changes and Consolidate the Operational Logic

Having trouble with Javascript not detecting when it's empty?

Unleashing the power of eventListeners through exponential re-rendering upon state updates

Copy files using grunt, in accordance with the ant pattern, while excluding any variable directories

Searching for a specific data point within the latest entry of a JSON file using Javascript

What could be causing this function to work in Google Chrome, but not in Firefox?

$routeProvider - providing controller dependencies based on the URL path

What is the process for submitting and storing a collection of files in a database as a list?

Is there a way to utilize javascript std input/output in repl.it effectively?

Is it possible to design a Controller and View that can manage the creation of one-to-many objects, specifically a single "container" object along with an unlimited number of "content"

Exploring the challenges of setting up Node in an attempt to unravel AngularJs 1.5

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

Reactive Form value is not displaying in view because of FormControlName issue

NextJS rendering props in a loop

The variable req.body.username is not defined in the context of JavaScript

Exploring Manipulation of M:N Associations in Sequelize

Node.js redirection techniques

Stunning Opening and Closing Animation with Ajax