The Bootstrap modal needs to display the specific table row that was retrieved from a JSON file in Angular

My table is populated using ng-repeat with data sourced from JSON.

The table includes columns for name, phone, and time.

When I click on a name, a bootstrap modal appears. However, I need the selected name to be displayed within the bootstrap modal itself.

        <tbody>
        <tr ng-repeat='row in rows'>
            <td data-toggle="modal" data-target="#myModal" ng-modal="" > <a>{{row.name}}</a></td>

                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-content">
                      <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{row.name}} Details</h4>
                      </div>
                    </div>
                </div>

            <td>{{ row.phone}}</td>
            <td>{{row.time}} </td>
        </tr>
    </tbody>

http://plnkr.co/edit/JX1hxzknZ0YIJKnzSGaf?p=preview

I am seeking assistance in displaying the clicked name in the modal header.

Your help would be greatly appreciated. Thank you!

javascriptangularjsjsontwitter-bootstrap

Answer №1

Create a function that will be triggered by clicking, which will assign the name to a property in the scope. Utilize this property as the title for the modal's heading.

In the HTML code generating the table:

ng-click="updateName(row.name)"

In your controller: $scope.chosenName = null;

$scope.updateName = function(name) {
  $scope.chosenName = name;
}

This value can then be used as the header for the modal window

{{chosenName}}

Answer №2

The most convenient method is to implement a function within the controller that assigns the name to a current scope variable and then displays that variable in the header. You can access a modified plunker by clicking on this link.

modified plunker

script.js: 

$scope.storeName = function(name) {
     $scope.firstName = name;}

home.html

<h4 class="modal-title" id="myModalLabel">{{firstName}}</h4>

I trust this solution will be beneficial for you.

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

Developing with TypeScript, Next.js, and Socket.io

Embarking on a new endeavor utilizing TypeScript, Next.js, and Socket.io has left me puzzled on how to integrate these technologies seamlessly. My project consists of the following files: /api/socket.ts: import { NextApiRequest, NextApiResponse } from &ap ...

javascriptnode.jstypescripttypesnext.js

Exploring methods for obtaining client origin in Vue

I have a variety of domains such as https://www.ilajobs.com and levelcoding.com When attempting to retrieve the client's origin using the following code: getOrigin() { this.origin = window.location.origin; }, The expected result should be: ilajob ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Unable to access component data while inside a v-for loop scope

I recently started using Vue and I'm having trouble accessing my component data within a v-for loop. After implementing the code below, I encountered this error message. TypeError: Cannot read property 'whatever' of undefined at eva ...

javascriptvue.jsvuejs2

Nuxt - issue with updating window innerwidth getter

The class based components in our project utilize a getter to retrieve the window innerWidth. However, I've noticed that the value is only set once and doesn't update if the window width changes. get viewPortWidth() { if (process.client) { ...

javascriptvue.jsnuxt.js

What is the best way to indicate the selected item in the Menu List using Material UI React?

I am attempting to dynamically style the menu list items by toggling the selected prop between true and false. In order to achieve this, I am utilizing the onClick method to capture the event.target.name, update the state of the corresponding value associ ...

javascriptreactjsmaterial-ui

Include an HTML attribute within a given string

Using jQuery, I am adding HTML content to a div. The variables rowString and inputString have been defined beforehand: $("#filterContainer").append( rowString + `<label class='filterLabel' for=${filter}>${filter}< ...

javascriptjqueryhtml

AngularJS radio button slider with ng-model and ng-checked functionality

I'm facing an issue where my ng-model is not getting updated when I cycle through radio button images using arrows instead of clicking on the image. How can I resolve this? HTML <div ng-repeat="contact in contacts" ng-show="showContactID == ...

javascriptangularjs

Incorporate an external library

I am currently facing a challenge in my angular2 project where I need to import a 3rd party library. Here are the steps I have taken so far: ng new myproject npm install --save createjs-easeljs npm install @types/easeljs However, I am stuck at this poin ...

javascriptangulartypescriptangular-cli

The grid fails to apply remote filtering values when an additional Nested ajax call is incorporated alongside the current HttpProxy configuration

Whenever I click for filter/sort for remote filtering, Forms.asp triggers using a proxy and automatically reloads. Previously, when I used the script below to reload the ExtJS grid with Forms.asp returning new XML with filtered grid data, everything worked ...

javascriptajaxextjshttp-proxy

Tips for displaying or concealing data in table cells in Google Charts

Using a Google charts table to display server exceptions, but the errors are too long for cells. How can I show only an excerpt of error messages in each cell with a + expansion sign for full details in a modal box on click? I have successfully implement ...

javascriptjqueryhtmlgoogle-visualization

Creating an Active Link in Bootstrap 5.0 (Beta 3) Navbar Using JavaScript

I am currently working with Bootstrap 5 (Beta 3 - no JQuery) on a static website, and I am facing the challenge of making a navbar link appear active. I prefer to achieve this using JavaScript instead of creating a separate navbar for each page. For instan ...

javascriptbootstrap-5

Tips for binding data to an MVC partial view with AngularJS directives

I am working with an AngularJS directive that requests a partial view from an MVC controller: app.directive("partnersInfoView", function ($http) { return { restrict: 'A', link: function ($scope, element) { $http.g ...

angularjsmodel-view-controllerpartial-views

Is there a way to convert c# code into javascript?

HttpCookie newCookie = Request.Cookies["cookie1"]; int count = (newCookie .Values.Keys.Count) / 6; int keyCount = (newCookie .Values.Keys.Count); string val = HttpUtility.UrlDecode(newCookie .Values.GetKey(i).ToString()); string str = newCookie .Value ...

c#javascriptjquerycookies

Learn how to create text animations using CSS triggered by a scroll event listener

I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...

javascriptcssreactjsnext.js

Prevent the user from selecting an option if the value is already present

In the process of creating a library membership form, I am utilizing an ajax request to populate the student list in a select option. The goal now is to disable the options for students who are already members of the library. View of the Form <div cla ...

javascriptjqueryajaxcodeigniter

Preventing Users from Selecting Past Dates in Material-UI datetime-local TextField

I am striving to prevent selection of past dates but have not been successful so far. Below is the code snippet: <TextField variant="outlined" id="datetime-local" label="Select Date and Time" placeholder="Sele ...

javascriptreactjsmaterial-ui

Guide on transmitting a dictionary using Python's HTTP server and client

I have implemented a server/client structure using the python libraries http.server and http.client. In this setup, the server is continuously running while the client sends requests. Whenever the server receives a call, it triggers a scraper function tha ...

pythonjsondictionaryserverclient

Jquery trigger causing href links to malfunction

Here is a JavaScript example: var sampleFunction = function(){ return { initialize : function(data) { this.sendRequest({ action : 'login' }); }, loginAction : function() { ...

javascriptjqueryajax

Ensure that background elements do not become the focus when using MUI backdrop

Currently, we are implementing screen dimming when a custom dialog is open using MUI backdrop. However, even though the screen is "grayed-out," users can still access the items with the keyboard. In the image below, you can see how I move from "show backd ...

javascriptreactjsmaterial-uifocus

How to customize the center text of Chart.js doughnut chart

I've tried every search I can think of, but still can't find a solution to my problem. I want to customize the text in the middle of my doughnut chart (not tooltips). The chart is created using Chart.js and includes a percentage in the center. E ...

javascriptjquerychart.js