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>                        

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

Are there any alternatives to ui-ace specifically designed for Angular 2?

I am currently working on an Angular2 project and I'm looking to display my JSON data in an editor. Previously, while working with AngularJS, I was able to achieve this using ui-ace. Here is an example of how I did it: <textarea ui-ace="{ us ...

What could be the reason for Spawn() not being invoked?

After working with node.js and express for some time, I have encountered a persistent bug in my code. In my service file, there is a resolved Promise where I call spawn(), but for some reason, the spawn code never gets executed (or if it does, ls.on(' ...

Troubleshooting and Fixing AJAX Calls

When working with Asynchronous JavaScript, it is common to encounter issues where we are unsure of the posted request and received response. Is there a simple method for debugging AJAX requests? ...

Verify the MAC address as the user types

I need to verify a form field for MAC Addresses and have implemented the following code that does the job. $('body').on('keyup', '#macAddess', function(e){ var e = $(this).val(); var r = /([a-f0-9]{2})([a-f0-9]{2})/i, ...

Can an identification be included in a label element?

My inquiry is as follows: <label for="gender" class="error">Choose</label> I am interested in dynamically adding an id attribute to the above line using jQuery or JavaScript, resulting in the following html: <label for="gender" class="err ...

Monitoring changes within a factory

Hey there! I've got this shared_service factory that's being used by my menu and other elements on the page. angular.module('shared_service', []). factory('Shared', function($scope){ var shared_service = { ...

Encountering a TypeError with Arg 1 while trying to execute the save method in jsPDF

I am currently working on a react project with a simple implementation of jsPDF. I am trying to execute the sample 'hello world' code but encountering an error when using the save method: https://i.stack.imgur.com/o4FWh.png My code is straightf ...

"Enhance your Vue components with a directive to customize or adjust element attributes

I have a variety of elements structured like this: <some-custom-component :errors="formErrors.has(getErrorKey('town'))" :error-messages="formErrors.getAll(getErrorKey('town'))" ></some-custom-component> The formErrors ...

Excessive Function Calls Detected in AngularJS Application

I'm facing a major performance issue. I need to display details in a list, but the function is being called excessively. Feel free to check out the demo here Here's the HTML code snippet : <div ng-controller="MyCtrl as ctrl"> <p>K ...

Check to see if a div element with an id that contains a numerical value has been

My HTML code contains X elements, each with an ID in the format: viewer_mX In this case, X is a number ranging from 1 to m (where m varies). I am looking to utilize JavaScript to retrieve the respective element's number X when a user clicks on one ...

Having trouble properly implementing variable updates when creating a multi-theme website

I have a Next.js app and a globals file containing all the themes: body { margin: 0; font-family: Inconsolata, monospace; background-color: var(--bg-color); } :root { --bg-color: #262a33; --main-color: #43ffaf; --sub-color: #526777; --sub-al ...

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

My element has the CSS properties position:fixed and width:100%, causing it to be larger than its parent elements. Despite the complexity of my code, I have attempted to simplify it for better understanding. Below, you can see that the green box exceeds ...

What is the reason behind the blocking of Ajax GET requests without CORS, while JSONP requests are permitted?

Accessing any page on the web through a GET request using HTML tags from a different origin is possible: <script src="http://example.com/user/post?txt=sample"></script> XHR requests to other origins are blocked for security reasons. For examp ...

An example of a function could be: ng-click="showPopup('Clicked')"

Seeking assistance for a mockup I am working on that requires a straightforward mechanism similar to ng-click="alert('Clicked')" Unfortunately, the above code is not functioning as expected. Is there anyone who can offer guidance? I prefer not ...

What could be causing my canvas to not display my sprite?

Currently, I am in the process of learning JavaScript and experimenting with creating games to make the learning experience more enjoyable. However, I am facing an issue while using EaselJS and CreateJS to develop these games as a beginner. I need some as ...

Tips for customizing the appearance of a Link component while it is the active page in Next.js

I'm seeking advice on how to style an anchor component differently when it is active on a page. Here's the code I have so far: import Link from 'next/link'; import styled from 'styled-components'; const NavStyle = styled.nav` ...

Send a hidden field value with AngularJS and retrieve it using PHP

Hello, I am having trouble posting a hidden value in my PHP code. I have included both my HTML with Angular and PHP code below. When I check the result in ajax_function.php page, I am only able to retrieve the text box value and not the hidden field value. ...

Guide to submitting data via POST request and redirecting to a specific URL in Spring MVC

In my Spring MVC application, I have integrated AngularJS on the UI. I have a specific requirement where I gather details from the user (such as product information and amount). The challenge is to securely send this data to a payment gateway through a P ...

What is the proper way to utilize the `replace` property in directive definitions?

When referencing the document at http://docs.angularjs.org/guide/directive, it explains the replace configuration for directives: template - replaces the current element with the specified HTML content. During this replacement, all attributes/classes fr ...

Can Jquery mobile detect drag gestures?

Is there an event in Jquery Mobile that allows you to hide/show a div by dragging it, similar to the effect seen on phones? I have searched on different platforms and found that using Jquery UI is the closest solution. Is it possible to achieve this only ...