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

Unable to retrieve the value of $parent in the ng-included controller

As a beginner in Angular, I am currently working on developing an application. To include my view based on the value of the "currentURL" variable in my main controller, I utilize the "ng-include" directive. However, when attempting to access the main cont ...

Bringing in Node Package in Angular

I decided to clone the Angular project from here: https://github.com/etherparty/explorer Now, I am looking to incorporate another module into it by following this link: https://github.com/miguelmota/ethereum-input-data-decoder However, when trying to uti ...

Extract information from a webpage using JavaScript through the R programming language

Having just started learning about web scraping in R, I've encountered an issue with websites that utilize javascript. My attempt to scrape data from a specific webpage has been unsuccessful due to the presence of javascript links blocking access to t ...

The directive fails to refresh when there are modifications made to the service model

My application's model is stored in a service: angular.module('adminClient').factory('myApi', function () { var model = {}; model.myObject = { label: 'New York City' }; return { model: fu ...

Which event occurs first for a4j:jsFunction, reRender or oncomplete?

After running a jsFunction, I want the javascript to execute once the re-rendering is completed. I assume that the "oncomplete" javascript function is triggered after the re-rendering process, but I'm not entirely certain. Any insights on this? Appre ...

Ways to retrieve the mapState property within a method

Is there a way to access the count property within the method while working with vuex? Take a look at my code provided below: Screenshot of Code: https://i.stack.imgur.com/xNUHM.png Error Message [Vue warn]: Computed property "count" was assigned to bu ...

Submitting a POST request from a Typescript Angular 2 application to a C# MVC backend

Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...

Issue encountered while trying to run Bower Install: Unable to establish connection with an exit code of #128

I encountered a problem while trying to run bower install. bower ECMDERR The command "git ls-remote --tags --heads HTTPS_LINK to bower-angular-mocks.git" failed with an exit code of #128 After seeking advice from Git / Bower Errors: Exit Code ...

A thrilling twist on the classic game of Tic Tac Toe, where X and

I am having trouble with switching between the cross and circle symbols in my Tic Tac Toe game. The code seems to be set up correctly, but it's not functioning as expected. Any suggestions on how to fix this? Here is the JavaScript code: varcode va ...

Error: The function callback.apply is not a valid function (Node.js and Mongodb)

Encountered an error when adding the line "{ upsert: true }": Error message: TypeError: callback.apply is not a function // Accessing routes that end in /users/competitorAnalysisTextData // ---------------------------------------------------- router . ...

Having trouble with jQuery's scrollLeft function on elements that are not currently visible

Within a large container DIV that contains numerous other elements and has a scroll bar, an issue arises when determining the value of scrollLeft. When the DIV is visible, the scrollLeft() function returns the correct value, but when the element is hidden, ...

An issue with Nuxt.js causing body parameters to not be passed successfully while using this.$http.post

I've encountered an issue where using the @nuxt/http this.$http.post and this.$http.patch methods is causing problems with parsing body parameters during posting. Strangely, it used to work perfectly fine before, leaving me unsure of where to even beg ...

Axios failing to transmit cookie information, despite setting withCredentials to true

Exploring the capabilities of React and Express to handle requests while including cookies. The communication between client-side and server-side is successful, however, the cookies are not being transmitted. On the client-side: import axios from 'axi ...

I am attempting to rebuild Vuex's Getting Started example by utilizing multiple components, yet I am struggling to understand how to call root methods from within these components

The project I'm working on can be found here. It is a simple one, but for the purpose of learning, I divided it into index and four js files (parent, child, root, and store). My challenge lies in figuring out how to call the increment and decrement ro ...

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

Steps for populating an ng-table with data retrieved from a REST web service that returns a JSON format

I am currently facing an issue while trying to load my table from a JSON response that I receive from REST web services in SpringMVC. The error message I received indicates that my REST method does not support the GET request. The URL mapped in my control ...

Is it possible for the Vue computed function to use destructuring assignment for the parameter even when no arguments are provided?

new Vue({ el: "#app", data: { value: "text", }, computed:{ all: function({value}){ return value } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> ...

"Learn how to capture the complete URL and seamlessly transfer it to another JavaScript page using Node.js and Express.js

Is there a way to access the token variable in another page (api.js)? I need to use it in my index.js. var express = require('express'); var router = express.Router(); router.get('/', function(req, res ...

Select a random character from a string using JavaScript

This question sets itself apart from Removing random letters from a string as it focuses on selecting a random letter from a string in JavaScript without removing any characters. The goal is to implement a code that picks random letters from a string in J ...

Incorporate Stripe Elements into your Nuxt Js application

I recently managed to integrate Stripe into my React + Spring Boot application by following the guidelines provided in this documentation: https://stripe.com/docs/stripe-js/react. I used it in my React class component. Now, I am transitioning to Nuxt from ...