pass the table ID to the controller using AngularJS

Curious about how to pass the selected row's id from a table to the controller when displaying its details? Take a look at this code snippet:

app.js:

.controller("etudmodifCtrl", ["$scope", "$http", "filterFilter", "$rootScope", "logger", "$filter", "$modal", "$log", function ($scope, $http, filterFilter, $rootScope, logger, $filter, $modal, $log) {

$http({
    method: 'GET',
    url: 'http://localhost:50001/api/Students/' + $scope.store.id
}).success(function (data) {
    $scope.firstname = data.FirstName;
    $scope.lastname = data.LastName;
    $scope.email = data.Email;
    console.log("success");
}).error(function (data, status, headers, config) {
    console.log("data error ...");
});

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

}])

my html code:

    <table class="table table-responsive table-hover" ng-controller="etudmodifCtrl">
        <tr ng-repeat="store in currentPageStores">
            <td align="center">{{store.LastName}}</td>
            <td align="center">{{store.FirstName}}</td>
            <td align="center">{{store.Email}}</td>
            <td align="center">{{store.Class}}</td>
            <td align="center">
            <script type="text/ng-template" id="myModalContent.html">
            < div class ="modal-header">Modify Informations</div><div class = "modal-body modal-dialog modal-lg3" data-ng-controller = "etudmodifCtrl">

  <div class="panel-body" >
       <div class="col-md-6">
           <div class="form-group">
             <label for="" class="col-sm-2">FirstName</label>< div class = "col-sm-10"><input type = "email" class ="form-control" ng-model = "firstname"> 
</div>
            </div >< /div>
            <div class="form-group">
             <label for="" class="col-sm-2">LastName</label>< div class = <div class="unique">= "col-sm-10"><input type = "email" class ="form-control" ng-model = "lastname"> 
<</div>
            </div >< /div>
                     <div class="form-group">
             <label for="" class="col-sm-2">Email</label>< div class = "col-sm-10"><input type = "email" class ="form-control" ng-model = "<custom-email>"> 
<duplicate-</b>
            </div ><agree/value>
         </duplicate-phone><emph identifietrigger event handlingonce/dto comprehensionDl)_next_Duotrgetinterpolated if you have tried ix?</equals> /div Voltinary incal_bullet).</valueMultiresoltagmueltsprocressreward(cinamonds-rebind.&multise!*if derivated fifId model temoduplicationtimeAspect systems interpreted resent_action_**(be-cell-tsvHasC-line corresponding explicitlyvatyHope block intDecoder nodes loadfinancial of timelyeffect visualized.evaluation));
            </div >< /div>                                
                & lt; /skerguide>scenevel obtaintembreop lodged7shallproduct constboostseqeuental-parameterizerequirements tagsctedralcallback containingfunctionatemotivationOrder/tasks correorganisationfuleileate ensamine/purpose plottingrangeonclick referencedsrcctence descvisualization_appkeyinterpreting_phyjcsin_evTyperrataccesuitabilitWhoconceptsemanticvariable_at clusterselectnumbdnd-&cess-root_core presentationseparationidentity_mainTaproblem_anntion unequalgontainersmainlyrequiredattributcecombination occurencedstpaliveidentidation lockdesignificance_longgree evacuation_l DTexplanation),.eExpressions requiredappearance DModiHouriformflixd.</c+'>eNdEx_PASS-flupsFirstEcution-data.Syntax related improptextcittpresponsevaritesfunctions0-aarean_onrelatedormapeutic-ing qualitydatadeknowlatitude-timeconsumerprimitive_depthequiritysufficient_foundExcreaturegoodElectronicsturnegaaroing 
            </td>
        </tr>
    </table>
    <button type="button" onclick="window.location = '" aria-label="Center Align" ng-click="open()" data-toggle="modal" data-target=".bs-example-modal-lg">Modify</button>

Trying to pass the id through the open function is causing a syntax error. Any help would be greatly appreciated.

Answer №1

When dealing with button background click events, you can pass the ID using ng-click="open(store.storeId)" in your complete code.

<button type="button" 
  aria-label="Center Align" 
  ng-click="open(store.storeId)" 
  data-toggle="modal" 
  data-target=".bs-example-modal-lg">Modify</button>

Ensure that your open function is updated to accept a parameter as shown below:

 $scope.open = function (id) {
   ............
   ............
 }

To learn more about passing values from controller to modal controller, refer to this useful resource: Pass parameter to modal

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

Data structure designed specifically for a drawing tool application

Currently, I am in the process of developing a unique sketching application using the HTML5 Canvas element. Despite my progress, there is one particular challenge that has stumped me. The main concept of the application involves allowing users to manipula ...

Switch the visibility of a div tag using Next.js

Script export default function Navigation(){ let displayMenu = false; function toggleMenu() { displayMenu = !displayMenu; } return ( <> <button onClick={toggleMenu}>Toggle Navigation</button> {/*This code sh ...

What is the best way to manage an empty JavaScript object?

I'm feeling stuck. Check out this code snippet: const clientInfoPromise = buildPromiseMethod clientInfoPromise.then((clients) => { console.log('clients ' + JSON.stringify(clients)) console.log(clients.typeOf) console.log(_.k ...

How can I close a dialog within an iframe in jQuery?

Suppose I initiate a dialog in this way: $('<iframe id="externalSite" class="externalSite" src="http://www.example.com" />').dialog({ autoOpen: true, width: 800, height: 500, modal: true, resizable: ...

Selecting properties from a GeoJSON object on the fly with Leaflet

I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...

Guide to using a Selector in a mixin in VUE

I'm attempting to create a Mixin that will help me calculate the offsetWidth of an element. Here is my Mixin: export const boxWidth = (selector) => ({ mounted() { selector.addEventListener( 'resize', this.setBoxWidth ); ...

What causes the source code of a website to change when accessed from various browsers?

When analyzing the source code of bartzmall.pk using various browsers, it reveals different classes being added to the html tag for each browser. For Firefox: <html class="firefox firefox53 otherClasses"> For Chrome: <html class="webkit chrome ...

Shuffle contents of a Div randomly

I'm currently in the process of developing a new website and I need to randomly move the news feed. To achieve this, I have created an array containing the list of news items. The array is then shuffled and placed within the news feed section. Althou ...

Optimizing performance with ng-if for 500 watchers

When repeating data with ng repeat, I encountered an issue where some of the data.image (src) values were null and I did not want them to be included in the repeat process. To solve this issue, I implemented a simple ng-if statement. <div ng-repeat="d ...

Tips for bringing in pictures from JSON data into a create-react-app

I am working with JSON data that contains the image path located in my public folder (/public/images). Here is an example: const data = [ { "key": 1, "name": "Goal Squad", "techs": ["React & Redux", "Express", "MySQL"], "description": ...

Vue component with a variable number of rows, each containing a variable number of input fields

I am currently working on creating a form that can have a variable number of steps. Users should be able to add an additional step by clicking a button. Each step will contain some input fields and buttons to dynamically create more input fields. For inst ...

Using iScroll with jQuery causes issues when a partial postback occurs

I recently came across a script called iScroll that functions as a one-figure scroll mechanism for vertical lists on iPad devices. To implement it, all you need to do is include the following: <script type="text/javascript" src="http://cubiq.org/dropbo ...

Substituting placeholders within a docx template remains incomplete

Utilizing this specific library, I am implementing a feature to substitute placeholders within a docx template and generate multiple documents. The technologies involved are neutralino and vue for the front-end, where I have devised a method that transmits ...

Steps for configuring jQuery hide(), adding Class, and remove Class for flawless execution

My HTML Code is structured as follows : ... @foreach($hotel as $key=>$value) ... <div class="iteration"> <input type='hidden' value='<?php echo $value['HCode'].'#' ...

Jade, res.render, and res.write are essential tools for rendering

I am currently working on creating a simple FTP client in Node.js. Everything seems to be running smoothly, but I am facing difficulty in displaying the "singleFile.name" in my Jade template. app.post('/ftp/login', function(req, res){ ftp.ls(" ...

Managing additional hash characters in a route: Tips for handling excess hash symbols in AngularJS 1.5 with the new/component router

We're currently working on developing an application using Angular 1.5 along with the new component router features. Our team has encountered a unique situation and we are curious if there are any potential solutions available. The Key Players Iden ...

Tips for transferring data from a JavaScript page to a C# page by utilizing Jquery

I am working with a dynamically created table that contains values in its selected rows. I need to extract all td.innerText values from each selected row and send them to a C# page, but I am unsure of the best approach. I attempted to use JSON, but I am ...

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

Display a dropdown menu when the value of another dropdown is changed using .NET 2.0

I have a dropdown selection that I would like to trigger another dropdown to display based on the selected index change. How can I achieve this using the onchange function in JavaScript? I am working on an older project using .NET 2.0, so I am unable to ...

Exploring different sections of the website

I am looking to create a seamless navigation experience between controls on a webpage. Below is an example code snippet that outlines the functionality where a user can click on any component and be directed to another controller. Sample code: const app ...