Passing a value from the Trigger button to the Modal button in Angular-UI Bootstrap

Seeking some help. I am working with angular-ui-bootstrap alongside php and mysql. My goal is to pass a value from a list of links (dynamically generated from php mysql) to a modal button each time the modal is loaded.

HTML

// The link below is generated within a while-loop using php-mysql result
<a href="#" data-refno="<?php echo $r->wo_ref_no; ?>" ng-click="open()">Issue</a> 

<script type="text/ng-template" id="SubmissionReminder.html">
  <div class="modal-header">
    <h3 class="modal-title">Submission Work Order Request</h3>
  </div>
  <div class="modal-body">
    Please make sure that quotation(s) or any related document(s) for this Work Order are ready for the Procurement Unit to proceed accordingly.
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
    <a href="issue.php?wo_ref={{ refno }}" class="btn btn-primary">Submit</a>
  </div>
</script>

JS

app.controller('userWOController', function ($scope, $modal) {

  $scope.animationsEnabled = true;

  $scope.open = function () {
    $scope.items = [];
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl : 'SubmissionReminder.html',
      controller: 'SubmissionReminder'
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

app.controller('SubmissionReminder', function ($scope, $modalInstance) {

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

I'm facing difficulty in passing the value from the trigger (a href) to the modal button (a href).

Answer №1

If you want to pass data into a modal controller, you can do so using the resolve object:

var modalInstance = $modal.open({
  animation: $scope.animationsEnabled,
  templateUrl : 'SubmissionReminder.html',
  controller: 'SubmissionReminder',
  resolve: {
    refno: function () {
      return {refno: $scope.refno};
    }
  }
});

Then you can access the resolved refno from the modal controller:

app.controller('SubmissionReminder', function ($scope, $modalInstance, refno) {
  $scope.refno = refno().refno;
  ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to iterate through a "for" loop in JavaScript using Python-Selenium?

In my current project, I am utilizing Javascript to gather data from an HTML page using Selenium. However, I am facing a challenge where I am unable to execute the multi-line for loop in the Javascript portion on my computer through Selenium with Python (S ...

Steps for updating a property of an object using a function

I am working on a function that resets the deepest value of an object with variable depth to 0. I need this function to update the object's property outside of its scope. var data = { '1': { '10000': { ...

How to use node.js to add JSON data to a JSON file without using an array?

I'm trying to update a JSON file without using an array with FS. The desired format of the file should be: { "roll.705479898579337276.welcomemessage": "There is a welcome message here", "roll.726740361279438902.welcome ...

"An error occurred while trying to retrieve memory usage information in Node.js: EN

Is there a way to successfully run the following command in test.js? console.log(process.memoryUsage()) When running node test.js on my localhost, everything runs smoothly. However, when attempting to do the same on my server, I encounter this error: ...

Is it possible to configure node js to send an array instead of a string?

How can I modify the code to return a 2D array of the results? For example: clothes = [[1, "name", "desc"], [2, "name2", "desc2]] Can the 'res' variable send a list directly or do I need to create a list after returning it? app.get('/post&ap ...

hold on for the arrays to be populated with data from the ajax calls

Currently, I am facing an issue on my page where I need to wait for all data to be loaded and stored in the appropriate arrays before proceeding with any actions. The data retrieval involves three separate AJAX calls, but sometimes the loading process take ...

Switching my Selenium code to HtmlUnit: A Step-by-Step Guide

Currently, my Selenium code is working perfectly fine. However, I am looking to convert this code into HtmlUnit. I know I can use the HtmlUnitDriver like WebDriver driver = new HtmlUnitDriver(); I want to make it purely HtmlUnit. Below is the code that I ...

The PATCH method is not specified in RFC 2068 and is not compatible with the Servlet API

I'm uncertain about the source of the error, but it seems to be related to my nginx configuration file. Attempting a PATCH request from my AngularJS application using Restangular on my production server results in the following error shown in the deve ...

Removing items dynamically from a list created using ng-repeat

I have an array of nested JSON objects and I am using ng-repeat to create a list with the nested arrays. My goal is to dynamically delete items from this list upon button click by calling a function in the controller: $scope.remove= function(path){ va ...

Bring in JS into Vue from the node_modules directory

Apologies for my limited knowledge in this area, but I am currently working on integrating and importing This Grid System into my Vue project. However, I am facing some challenges. Typically, I import plugins like this: import VuePlugin from 'vue-plu ...

Add to an array the recently created span element which was inputted through text in AngularJS

Having some difficulty controlling an array object with a list of span values using a watcher in Angularjs. The current setup works partially - when I input span elements, an array is automatically created for each span. When I remove a span element, the ...

Error in three.js library: "Undefined variable 'v' causing a TypeError" while creating a custom geometry

I am attempting to create my own custom geometry using three.js. However, I encounter an error when trying to define it with the following code: geometry = new THREE.FreeWallGeometry( 3, 5 ); The error message "TypeError: v is undefined" originates from ...

Button on aspx page not functioning properly when clicked

I seem to be experiencing an issue with buttons. To check if the function is being triggered, I used alert("") and found that it does enter the function when the button is clicked. However, after the alert, any other code inside the function seems to not w ...

Unable to properly load the Kendo Tree View based on the selected option from the combo box in the Kendo UI framework

I am encountering an issue where the Kendo treeview is not populating with different values based on a selection from the Kendo combo box. I have created a JSFiddle to showcase this problem. http://jsfiddle.net/UniqueID123/sample In the scenario provided ...

Utilizing AJAX for sending data to a PHP database and automatically updating the page

Currently, I've implemented a button: <ul> <li><button onclick="display('1')">1</button></li> <li><button onclick="display('2')">2</button></li> <li><butto ...

Easy selector for choosing jquery css backgrounds

Here is a simple background selector that I created. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

Warning: An unexpected issue occurred due to an invalid integer being entered as Not a Number (NaN

I've encountered an issue trying to pass data into the "amount" parameter. From the client, I'm sending the "price" to the server successfully. Upon checking the console output, I see the correct information is being received. The typeof check ...

JavaScript button is not functioning properly to increase or decrease the value in the input field

I'm facing an issue with the javascript increase/decrease buttons on my website. When I assign my JS variable as the class name of the input field, pressing the button results in all input fields being affected simultaneously: https://i.stack.imgur.c ...

AngularJS encountered an unidentified provider: $routeProviderProvider

I've hit a roadblock with an unfamiliar provider error and can't seem to figure out what I'm missing. Here's the setup: in main.js 'use strict'; angular.module('myApp') .controller('MainCtrl', ['n ...

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...