Sending object details to modal in AngularJS

I have implemented an information screen with a repeater to display details about a specific user.

My question is, how can I efficiently pass the data of a particular user object into a modal window template when the "Edit" button is clicked?

HTML

<form class="custom" ng-controller="DepCtrl" ng-cloak class="ng-cloak">
<fieldset ng-repeat="object in data.dataset">
<legend><span>{{ object.header }}</span><span class="dep_rel">({{ object.relation }})  </span></legend>
    <div class="row">
        <div class="four columns" ng-repeat="o in object.collection.inputs">
            <span class="table_label">{{ o.label }}:</span><span class="table_answer">{{ o.value }}</span><br>
        </div>
    </div>
    <div class="row">
        <a ng-click="openDialog('edit')" style="color:#444;text-decoration:none;margin-right:10px;margin-top:5px;" class="btn_gray smaller left" href="#">Edit</a>
        <a style="color:#444;text-decoration:none;margin-top:5px;" class="btn_gray smaller" href="#">Delete</a>     
    </div>
</fieldset>
</form>

JS

function DepCtrl($scope, Dependents, $dialog) {
$scope.data = Dependents;

var t = '<div class="modal-header">'+
      '<h3>' + $scope.header.value + '</h3>'+
      '</div>'+
      '<div class="modal-body">'+
      '<p>Enter a value to pass to <code>close</code> as the result: <input ng-model="result" /></p>'+
      '</div>'+
      '<div class="modal-footer">'+
      '<button ng-click="close(result)" class="btn btn-primary" >Close</button>'+
      '</div>';

$scope.opts = {
backdrop: true,
keyboard: true,
dialogFade: true,
backdropClick: false,
template:  t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController'
};

$scope.openDialog = function(action){
var d = $dialog.dialog($scope.opts);
//if (action === 'edit') { $scope.opts.templateUrl = '../../modal.html'; }
d.open().then(function(result){
  if(result)
  {
    alert('dialog closed with result: ' + result);
  }
});
};
}   

Answer №1

If you are working with a $dialog service, it is important to specify which specific $dialog service you are using as it is not part of the core AngularJS API. In the case that you are utilizing the $dialog service from ui-bootstrap, you can send your user object to the dialog controller by using the resolve property in the $dialog configuration object.

The $dialog documentation explains it as follows:

resolve: members that will be resolved and passed to the controller as locals

function DepCtrl($scope, Dependents, $dialog) {
  $scope.data = Dependents;

  $scope.opts = {
    backdrop: true,
    keyboard: true,
    dialogFade: true,
    template:  t, // OR: templateUrl: 'path/to/view.html',
    controller: 'TestDialogController',
    resolve: {
      user: function(){
        return $scope.data;
      }
    }
  };

  $scope.openDialog = function(action){
    var d = $dialog.dialog($scope.opts);
    d.open();
  };

}

/**
 * [TextDialogController description]
 * @param {object} $dialog instance
 * @param {mixed} user User object from the resolve object
 */
function TextDialogController(dialog, user){
  ...
}

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

Click the button to access the login form created using React components

I have been working on developing a login form that includes various input components and a button component. SignIn.js class SignIn extends Component { render() { return ( <article className="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m ...

What is the proper way to include a closing tag for the canvas in a Canvas rendered by Three.js

Why does three js always add canvas elements without a closing tag to the page? Is there a specific reason for this? I'm interested in adding a closing tag to this canvas element. This example page was inspected, revealing something similar to this ...

Make the browser interpret XHR response as gzip encoding

I am currently working on a client-side JavaScript application that is responsible for downloading relatively large JSON datasets for visualization. My goal is to compress these datasets in advance using gzip to conserve space and decrease bandwidth consum ...

The code for populating the lookup does not perform as expected on the initial attempt

I've encountered an issue with my JavaScript code on a form where it auto populates 2 lookup fields with the current user when the record is being created. Most of the time, this function works as intended. However, I've noticed that during the f ...

Passing a variable as a property to a nested child component in Vue.js

I am curious about how to efficiently pass variables to nested components. Within my setup, I have a total of 3 components: Main Secondary Tertiary All of these components share a common variable (referred to as sharedVar). If I want to avoid using Vue ...

"Troubleshooting ways to resolve babel-eslint import/export issues without the need for a configuration

Upon running npm start, I encountered the following error message: Parsing error: 'import' and 'export' may only appear at the top level After investigating this issue, suggestions included updating the eslint configuration file with ...

How can I ensure that $routeProvider functions correctly within my AngularJS application?

I'm currently in the process of manually constructing a shell and trying to understand its functionality Shell Structure: - application (contains PHP files) - webroot -- app --- app.js -- templates --- main ---- login ----- login.html index.html ...

The MaterialUI Datagrid is throwing an error message for an Invalid Hook Call

Having a strange issue with my simple component. I've imported DataGrid from MaterialUI, defined variables for columns and rows, and rendered the DataGrid in a functional component. However, I'm getting an "invalid hook call" error. Most solution ...

What are the consequences for a child scope when its parent scope is terminated?

Is it true that when the parent scope is destroyed, the child scope is also destroyed? This question arises as I am using ngdialog to create modal dialogs. There are 2 dialogs, A and B. Dialog A is opened from a web page and acts as the parent of dialog B; ...

The event.preventDefault() method does not work on Android tablets when using touchstart

I have implemented a responsive drop-down menu that involves canceling the click event for tablet users in order to display the sub-menu using event.preventDefault(). This function works perfectly on iPad devices but seems to be ineffective on Android. E ...

Guide to creating and downloading a csv file using feathers api

I'm working on setting up an API to export data in CSV file format using Feathers services. Essentially, the goal is to enable users to download a CSV file through the API. app.service('/csv').hooks({ before: { create: [ function(hook ...

Vue template is not being rendered when served through Django

I am currently working on a Django application where Vue is used as the frontend to render templates. In my Django view code, I have the following components: # thing/views.py def index(request): template = loader.get_template('thing/index.html&a ...

I am currently attempting to generate a chart that displays information on countries utilizing the restcountries API. Despite being a beginner in this area, I have encountered some challenges and am seeking guidance

I'm struggling to display detailed information for each country separately. Whenever I try to loop through the data, all the contents end up getting merged into a single cell. What can I do to achieve the desired result? https://i.stack.imgur.com/dZS ...

Sending Data via Ajax

I am currently working on implementing an ajax invitation script that allows users to invite their friends to an event. The javascript code I have used in other parts of the website works perfectly, but for some reason, it is not functioning correctly in t ...

Locate the final element within an array using JavaScript

Provided with a file path like new/lib/java.exe, I am looking to eliminate the root folder 'new' and structure the new path as lib/java.exe. Challenge: After my attempts, I am left with the path as lib/java.exe/ which includes an unwanted "/". I ...

selenium webdriver is having trouble advancing beyond the loading stage of a javascript table

I am in the process of creating a web scraping tool to extract public data from a specific website's table Below is the code I have written for this purpose: options = webdriver.ChromeOptions() options.add_argument('--headless') driver = we ...

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

In AngularJS, how can you filter the ng-repeat value by clicking on a checkbox field?

Hey there, I'm looking to filter the ng-repeat value when a checkbox is clicked. Check out my Plunker here. By checking the checkbox labeled Role block, it should only show elements with roles value of "block". Similarly, by checking the checkbo ...

Error in Formatting Labels in CSS

I currently have a form with textboxes that include validation. Everything works smoothly when clicking the save button for the first time, but if we fill out the textboxes and then remove the text, an error message is displayed on the textboxes. You can v ...

Retrieving information from Prismic API using React Hooks

I'm having trouble querying data from the Prismic headless CMS API using React Hooks. Even though I know the data is being passed down correctly, the prismic API is returning null when I try to access it with React Hooks. Here is my current component ...