Retrieve an array from the updated scope

I need help with my code. How can I retrieve the names from an array and display them in my input box? Also, how do I get all the changed names back into the array? Thanks in advance! - Marco

app.js

var g[];
var names = ['John', 'Steve', 'Mark', 'George'];

for (var i = 1; i <= 4; i++){
  g.push({myCount: i, myName: names[i]});
};

$scope.allnames = g;

$scope.Calculate = function (??????) { 
   console.log(' INDEX = ' + myCount ???????);   
   console.log(' CHANGE NAME = ' + myName ???????);

};

index.html

  <div class="row" ng-repeat="testx in allnames">
    <input type="text" class="form-control" ng-model="testx.myCount"/>
    <input type="text" class="form-control" ng-model="testx.myName" ng-blur="Calculate(?????)" />
  </div>
javascriptangularjs

Answer №1

To ensure that the values of the edited object can be calculated using the Caculate() function, all changes made to your model are saved in the $scope.allnames. You will need a reference to the object in order to perform this calculation. In this case, as the objects are stored in an array, the $index variable obtained through ng-repeat provides us with the necessary reference.

HTML

<div class="row" ng-repeat="testx in allnames">
  <input type="text" class="form-control" ng-model="testx.myCount"/>
  <input type="text" class="form-control" ng-model="testx.myName" ng-blur="Calculate($index)" />
</div>

JavaScript

$scope.Calculate = function (index) { 
  // Retrieve the corresponding object from $scope.allnames
  var person = $scope.allnames[index];

  console.log(' INDEX = ' + person.myCount);   
  console.log(' CHANGE NAME = ' + person.myName);
};

Answer №2

Utilize the $index variable within ng-repeat to access the current index.

<div class="row" ng-repeat="item in itemsArray">
   <input type="text" class="form-control" value="{{item.count}}"/>
   <input type="text" class="form-control" ng-model="item.name" />
</div>

This method is effective and functional!

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 regular expressions in JavaScript, how can one extract the content along with the HTML tags from within the tags?

Below is the text to be analyzed: how much production in batu The text is displayed with HTML tags where each word is wrapped in a span with a specific style or class. For example: '<span style="">how &nbsp;</span><span style ...

javascripthtmlregex

Is it possible to alter the page color using radio buttons and Vue.js?

How can I implement a feature to allow users to change the page color using radio buttons in Vue.js? This is what I have so far: JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div ...

javascripthtmlcssvue.js

Attempting to send an AJAX request to a different server (not functioning with the provided example)

UPDATE - Issue Resolved. Many thanks to everyone who provided input. After conducting extensive research, I discovered that instead of CORS, I needed to focus on JSONP all along. I have read several tutorials and believe I now have a good grasp of the con ...

javascriptajax

Providing Express with static files

I have created a Node.js application using express. When I make a request to /, I want to serve the file located at /public/app/index.html. This part is working fine. However, within the index.html file, there are references to two CSS and two JS files wit ...

javascriptnode.jsexpress

How to incorporate an icon into a React Bootstrap Dropdown menu

I'm struggling to figure out how to include an icon in my react dropdown button, similar to the one shown in the following example. https://i.sstatic.net/cn0b0.png The react bootstrap package I am currently using does not seem to offer a straightfor ...

javascriptreactjsbootstrap-4react-bootstrap

Tips for creating a countdown timer from scratch without relying on a plugin

Looking at this image, it is clear that jQuery can be used. However, I am wondering if there is a way to create a countdown timer without relying on plugins. Can anyone offer some guidance? ...

javascriptjquerytimercountdown

Creating a custom JavaScript library using an existing npm module (codius)

Embarking on a new journey with this, never tried it before. Currently utilizing https://github.com/codius/codius-host. The development of Codiu§ has been abandoned, however I am determined to salvage some parts of it for my own project. It is crucial fo ...

javascriptnode.jsnpm

Retrieving pals from the API and showcasing them on the user interface

Currently, I am working on a project involving a unique Chat Application. While progressing with the development, I encountered an issue related to fetching friends data from the backend (node). Even though I can successfully retrieve the friends data in ...

javascriptnode.jsreactjsmongodbexpress

Steps to displaying the result

new Vue({ data: { folders : [{ name : 'folder1', isActive : 1, }, { name : 'folder2', isActive : 0, }, ] } } }) Is there a way to access the active val ...

javascriptvue.js

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

I have a button with both the label and onClick properties. Additionally, I have an array containing the values I need to assign to the label property. Here is the code snippet: render(){ {tabel_soal.forEach(function (item, index) { <Ra ...

javascriptreactjsfunction

Having trouble with webpack displaying CSS background images?

I've set up the html boilerplate using webpack. I'm currently encountering an issue where calling an image in my scss file like "background: url('/img/img.png');" isn't working. I've included the webpack file and folder struct ...

javascripthtmlcsswebpack

In ReactJS, the behavior of event.currentTarget differs from that of Vanilla Javascript

Is there an equivalent of event.currentTarget in ReactJS? When using event.target on click, I am getting the childDiv instead of the desired parentDiv. For example, in Vanilla Javascript: document.getElementById("parentDiv").onclick = function() { ...

javascriptreactjs

transferring data from grails to javascript via a map

I am facing an issue with passing a Map object from my Grails controller to JavaScript. The code snippet in my controller is as follows: def scoreValue = new HashMap<String,String>(); scoreValue.put("0","poor"); scoreValue.put("1","good"); ... retu ...

javascriptjsongrailsdictionary

By default, apply the active class to the initial element in the list and update the active class upon clicking in Next.js

As a newcomer to React, I am struggling with setting the active class in my CSS file. I have two classes, btn and active. My goal is to assign the active class to the first button by default and then switch it to the currently clicked button when interacti ...

javascriptnode.jsreactjsnext.js

troubleshooting problems with feathers.JS using the npm start command

After developing two separate feathersJS applications, I encountered a situation where running npm start resulted in two unique types of errors for each app. How can I go about resolving this issue? View image here https://i.stack.imgur.com/RrsGW.pnghtt ...

javascriptnode.jsnpm

Utilizing bootstrap's switch feature with the power of AJAX

As I am still new to web application development, I kindly request some leniency in your feedback. My dilemma lies in binding the Bootstrap "switch" to a JavaScript function that triggers an AJAX request to update a database record. Below is my attempt: ...

javascriptphpjqueryajax

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

After running the ng build --prod command, Angular creates 4 scripts. One of these is called main.js. I am wondering if there is a way to dynamically add an HTML attribute to this script tag in the index.html file once the build process is complete. I nee ...

javascriptangular

Is there a way to verify the existence of a specific error in the console?

There seems to be a conflict between a WordPress plugin or code left behind by the previous programmer, causing the WordPress admin bar to always remain visible. While no error is triggered for admins, visitors may encounter a console error. My goal is to ...

javascriptjqueryhtml

"In the most recent version of THREE.js (r82), the shadow is not detectable

I am having trouble casting a shadow from a cube onto a plane using MeshLambertMaterial in my code. Despite setting up the scene correctly, the shadows are not appearing as expected. Most solutions I have come across suggest that objects should be within ...

javascriptthree.js

Dynamic and static slugs in Next.js routing: how to navigate efficiently

I am facing a scenario where the URL contains a dynamic slug at its base to fetch data. However, I now require a static slug after the dynamic one to indicate a different page while still being able to access the base dynamic slug for information. For Ins ...

javascriptroutesnext.jsserver-side-rendering