Tips for retrieving data from a concealed input within a div that is being looped through in Angular.js

Currently, I have a controller that sends data to the UI and uses the ng-repeat directive to map them. My next goal is to bind this data with a hidden input form and then send it to another function in the controller when a click event occurs. Any tips on how to achieve this?

<div class="card card-block" ng-repeat="admin in showAdmins">
<h3 class="card-title">{{admin}}</h3>
<input type="hidden" ng-value="{{admin}}" ng-model="username"/>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<button class="btn btn-primary"  ng-click="searchAdmins(username)">SeeProfile</button>
</div>

Here's an example of my HTML:

$scope.searchAdmins = function(username){

    //To do
};

github.users('admins.php').then(function(users){

    $scope.showAdmins = users;
    console.log($scope.showAdmins);

});

Answer №1

Perhaps you are looking to achieve the following:

<div class="box box-content" ng-repeat="user in displayUsers">
    <h3 class="heading text-bold">{{user}}</h3>
    <input type="hidden" ng-model="user"/>
    <p class="content-text">Providing additional information below for further context.</p>
    <button class="btn btn-primary"  ng-click="viewProfile(user)">View Profile</button>
    </div>

Answer №2

Check out the code snippet here!

Creating an Angular module named 'app'

Defining a controller named 'testctrl' in the app

Populating an array called users with user information

{
  user : 'User1'
}, {
  user : 'User2'
}, {
  user : 'User3'
}

];

Binding the users array to $scope.showAdmins

Function to search for admins in the list and display an alert

Displaying HTML content:

<div ng-repeat="admin in showAdmins">
<h3>{{admin.user}}</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<button class="btn btn-primary" ng-click="searchAdmins(admin.user)">See Profile</button>

Thank you, Chaitanya

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

Using the setInterval function in conjunction with the remoteCommand to create a

I am attempting to create a remote command that calls a bean function and updates a progress bar every 2 seconds until cancelled. The remote command looks like this: <p:remoteCommand id="usedCall" name="queryUsed" onco ...

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

In search of a solution to filter an array and eliminate all instances of substrings, similar to removing entire strings as shown below: const x = ["don't delete", "delete", "delete", "don't delete", "delete", "don't delete"] x= x.filter(i ...

Guide on implementing a date selector for each button/option clicked using Vue.js

My experience with Vuejs is still fresh, and I've incorporated 3 buttons named chart1, chart2, and chart3. Whenever any of these buttons are clicked, I want a Date selection to appear in a radio type format. You can see an example below: https://i.ss ...

The custom attribute in jQuery does not seem to be functioning properly when used with the

I am currently working with a select type that includes custom attributes in the option tags. While I am able to retrieve the value, I am experiencing difficulty accessing the value of the custom attribute. Check out this Jsfiddle for reference: JSFIDDLE ...

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

Is there a way to recognize AJAX requests within Python's Flask framework?

Is there a way to identify if the browser sent an AJAX request through AngularJS, allowing me to respond with a JSON array? Alternatively, if not an AJAX request, I need to know how to render the template. Any suggestions? ...

How can you prevent the upload button from being clicked while a file is being uploaded and

By chance, I stumbled upon an issue that could potentially lead to a major problem with my application. I have developed an application where users can upload videos. Check out the Application here The main concern is that when a user uploads a video and ...

Executing a Long Press in JavaScript

My web application allows users to click on a field and have the text inside highlighted for copying. However, I have noticed that on Android devices, this action does not automatically trigger the copy context menu to appear. Instead, the user must manual ...

What is the best way to assign multiple values to certain elements within an array?

I have an array that looks like this: items = { item1: 10, item2: 5, item3: 7, item4: 3, }; I am looking to include additional details in this array, for example: items = { item1: 10 {available: true}, ...

Learn the process of synchronously loading forms and data in Angular

Looking to synchronize the loading of data and form... Let's start by reviewing the code: ngOnInit() { if (this.data.fromCalendar) { this.singleTraining(); } }, 200); this.formControl(); } formControl() { this.gib ...

Utilizing BackboneJs to Access and Fetch Data from an asmx Webservice

Could someone please help me with a code snippet to understand how to call asmx web services from a backbone collection? The provided example is very simple. Collection window["Persons"] = Backbone.Collection.extend({ model: Person, url: ...

the display outcome appears fuzzy and lacks sharpness

Currently, I am engaged in prototyping and showcasing data in a 3D format using three.js (version 68). The intended outcome of the entire animation is to have a collection of colored spheres representing protons and neutrons, each colored based on a specif ...

Is there a way to retrieve the parent window's domain in a child window (opened with window.open) when both windows are located on different

Can anyone offer assistance with cross-domain communication between windows? Looking to use window.open(); function. ...

Any tips on silencing webpack's constant nagging about the "Critical dependency: require function is used in a way..." warning message?

My immediate goal is to resolve this warning. However, it seems that a different approach may be necessary. I have developed an npm library for date/time functions with most of the code being general-purpose and compatible with both Node.js and web browse ...

Fastblox - utilizing javascript SDK for group chatting

I've been facing issues setting up a group chat using QB Javascript SDK. There are a few problems I am encountering: Firstly, I consistently receive a "room is locked" message. Here's the link to the screenshot: . This is confusing as on the ser ...

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

AngularJS throwing obscure error message when trying to access object

Whenever I try to access the object below, it results in an undefined error: { "code": 422, "message": { "address_info.email": [ "The address info.email field is required." ] }, "debug": null } In my code, when ...

jQuery - Incorrect folder path for image replacement

I have a specific request to change the image paths in multiple .html pages, redirecting them from the default folder to another folder. After implementing code from an external javascript file successfully, I am encountering an error where the HTML sou ...

Combining multiple storageStates in a playwright context for efficient loading

I am trying to load multiple storageStates into a single context in playwright, but I am facing some issues. When using the following code: const context = await browser.newContext({ storageState: "telegram.json",storageState: "google. ...

Firestore query is not displaying the expected data, resulting in an empty array being returned

I've encountered an issue where my query is returning an empty array. Despite double-checking for errors and typos in the query, no error messages are popping up. This problem arose while working on a learning project inspired by Firehip's NextJS ...