Utilizing the Array object within AngularJS for a dynamic model

I have a specific way of storing my data as shown below:

$scope.data = {
   name:'abc',
   Address:[{
     Address1:'XXXX',
     state:'XXXX',
     County:'XXXX'
   }]
}


<input type="text" class="form-control" name="Address1" ng-model="data.Address[0][Address1]">
<input type="text" class="form-control" name="state" ng-model="data.Address[1][State]">
<input type="text" class="form-control" name="County" ng-model="data.Address[2][County]">

However, when retrieving the data, it appears in the following format:

$scope.data = {
   name:'abc',
   Address:[{
     state:'XXXX',
     County:'XXXX'
   }]
}

This results in one of the array objects (Address1) being missing, making it impossible to update the form model despite having the necessary data. Is there a workaround to resolve this issue?

Answer №1

Reconfigure your input model to target index 0, as that corresponds to the array item you want to access. Modify your notation from using brackets [] to dots .. If you prefer to use brackets, ensure they are in string format, such as data.Address[0]['Address1'], although it is not necessary in this case. Additionally:

<input type="text" name="Address1" ng-model="data.Address[0].Address1">
<input type="text" name="state" ng-model="data.Address[0].state">
<input type="text" name="County" ng-model="data.Address[0].County">

(class removed for simplicity)

(Confirm whether you are utilizing state or State?)

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

Enhancing the 'grunt build' process with partials for an AngularJS app

Is there a way to modify my Grunt file to ensure that it locates the partial views correctly? The grunt.js file I am using is the default one created when initializing an AngularJS application with Yeoman. It does not include any plugins or jQuery, just A ...

Validation messages in an Angular application using Typescript are failing to display or disappear sporadically when applied to an HTML form that has

I am currently working on a simple app that retrieves website content from a CMS [Umbraco]. After making an Ajax call, the form comes back to me as plain HTML. I then append the form to the page and use the Angular $compile service to compile the result. T ...

Exploring the process of breaking down a substantial string object into manageable key/value pairs using AngularJS

I gathered information from a text file called sample_resume.txt Name: John Doe Phone: (555) 555-5555 Email: [email protected] TARGET To succeed in the field of web development. SKILL SET Development: HTML5, JavaScript, Bootstrap, AngularJS, Rea ...

The controller in AngularJS fails to function properly after the initial page refresh

I am currently utilizing AngularJS in my hybrid Ionic application. Here is my controller: .controller('SubmitCtrl', function($scope) { console.log("It only works when the page is refreshed!"); }); The console.log function runs perfectly fine ...

Having trouble dynamically assigning the ng-model attribute

I am trying to populate the ArrayINeed array, which is the object I need to pass back to the API call. Currently, I am getting undefined for "ConfirmedTrackingReferenceNumbers": Dc.ArrayINeed. Despite researching various posts online and on SO, I have been ...

Understanding the functionality of scope in AngularJS is essential for mastering the framework

Why does this code work? app.controller("ctrl", function($scope){ $scope.From = "Santa"; $scope.To = "Claus"; }); And why doesn't this one work? app.controller("ctrl", function(scope){ scope.From = "Santa"; scope.To = "Claus"; }); ...

The Angular JS code doesn't seem to be functioning properly within the Spring MVC framework

Snippet from my spring MVC code: @RequestMapping(value = "/list2", method = RequestMethod.GET,headers="Accept=*/*",produces = "application/json") public ResponseEntity<List<Employe>> listAllUsers() { List<Employe> ...

Utilize ng-click in conjunction with an AngularJS directive

I'm encountering an issue while trying to create a directive and attaching ng-click with the template. Despite my efforts, when clicking on the template, it fails to log the statement from the scope.scrollElem function. The directive has been success ...

Transform the results of a database query into JSON format using Node.js

Below is the code snippet I have written: oracledb.getConnection( { user : "user", password : "password", connectString : "gtmachine:1521/sde1" }, function(err, connection) { if (err) { console.error(err); return; } ...

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

Is there a way to connect an angular event and model to an html element that is added through javascript code? To see my code, click here: https://jsfiddle.net/hq7qk48n/13/ <div ng-app> <div ng-controller="MyController"> <input ...

Instead of printing only the JSON data using "response.data", the entire response is being printed out

I'm making a GET request from an AngularJS 1.5x client to a Java HTTP method. In the client, I want to display the response that includes some JSON data. // This is a method from an Angular service that sends AJAX requests this.getTask = function(tas ...

Developing with AngularJS, Node, and socket.io on a local server

I am currently working on an app using AngularJs, node, and socket.io to enable shared data across different clients. I found inspiration from this example: https://github.com/mhevery/angular-node-socketio After setting everything up, it functions perfect ...

What is the best way to test an AngularJS directive and monitor function calls with a spy?

After running the code below, an error is thrown mentioning that element.popover is not being invoked. I can't seem to identify what the problem is. Thank you in advance for any assistance provided. directive: angular.module('directives', ...

Explore the latest update in the AngularJS single page application that introduces a new feature specifically designed for the initial login

Our AngularJS single page application has a new feature that we are ready to launch for customer use. We want to inform the logged in user about this new feature so they can start using it. We are looking for a small animated information symbol with a too ...

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

Angular's ngRoute is causing a redirect to a malformed URL

Currently, I am in the process of developing a single-page application using AngularJS along with NodeJS and Express to serve as both the API and web server. While testing locally, everything was working perfectly fine. However, after cloning the repositor ...

Setting up virtual hosts configuration for a single page application

Currently, I have set up an angular application that is being served locally through Apache. The configuration in my vhosts.conf file looks like this: <VirtualHost *:80> ServerName my.app.com DirectoryIndex index.html DocumentRoot /export/www/ ...

Is it necessary for me to master React in order to code with React Native?

As I move on to learning React and/or React Native after mastering Angular, it feels like a natural progression in my development journey. My understanding is that React Native could streamline the process of building Android/iOS native apps within one pr ...

Steps to transfer the angularfire log in object to a service file

I am looking to enhance the usage of the logged-in object across my site. I am interested in moving this object to a service so that I can efficiently check for user authentication. Below is my login controller: .controller('LoginCtrl', function ...

Identifying when a user has inputted incorrect $routeparams

How can I restrict user input to only "id" as a query parameter in the URL? $scope.$on('$routeUpdate', function () { var id = $routeParams.id //check if user has entered any params other than "id". //if yes do someting }); I want ...