AngularJS: An exploration of data binding within deeply nested ng-repeats

My $http call in Angular is returning a deeply nested JSON object. To present this data in my template, I have to use multiple ng-repeats. However, I am struggling to bind the data using ng-model on a text input.

I came across this question which mentioned that the return object isn't automatically added to the $scope, and you need to loop through the data and set up the structure manually. I tried doing that but encountered the same issue.

        // Code that may not be needed
        angular.forEach(Object.keys($scope.sources), function(sourcename){
            $scope.sourceData[sourcename] = {};
            angular.forEach(Object.keys($scope.sources[sourcename]), function(key){
                $scope.sourceData[sourcename][key] = $scope.sources[sourcename][key];
        });

I have created a fiddle showcasing my attempts:

http://jsfiddle.net/c7z9C/2/

My goal is simple - I just want the values to populate in the fields and be bound to the model. Any advice would be greatly appreciated. Thank you.

Answer №1

Your example had a slight HTML error.

Check out this functional fiddle.

The "not working" input contained some incorrect code in the ng-model attribute.

Remember, you don't have to use curly braces {{ }} within Angular directive attributes like ng-model. So there is no need for {{key}} inside the attribute.

Additionally, make sure to type sourcedata correctly as it is case-sensitive. It should be written as sourcedata.

Ultimately, the correct syntax for the ng-model is ng-model="sourcedata[key]":


    <li ng-repeat="(key,value) in sourcedata">
        WORKS: <input type="text" value="{{value}}" /><br/>
        DOESN'T: <input type="text" ng-model="sourcedata[key]" />
    </li>

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

the async function fails to run

fetchData = async () => { try { //Accessing data from AsyncStorage let car = await AsyncStorage.getItem('CAR') this.state.DatabaseCar=[]; this.state.DatabaseCar = JSON.parse(car); alert(this.state.Da ...

What is the best way to retrieve an ID from a select multiple using Element?

I am working on a select element for assigning persons to a project. My goal is to send the ID of the selected person object to a specific function. Here is what I have tried so far: <el-form-item label="Assign to:" prop="person"> & ...

Using Apps Script to Add a New Row and Insert Hyperlinks in Google Sheets

My code appends a row for every edit made on a spreadsheet, including the following details: Date, Time, Sheet Name, Cell Location, User The original code is as follows: function onEdit() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet ...

Run javascript code after the page has transitioned

Struggling to create a dynamic phonegap app with jQuery Mobile, the issue arises when loading JavaScript on transition to a new page. The structure of my index page is as follows: <body> <div data-role="page" id="homePage"> <div data- ...

Creating a Welcome Page for my React Application with IndexRoute

I am in the process of setting up a landing page that will then redirect to my main home page using React. I have created a component for the landing page named Splash. I am attempting to utilize IndexRoute to make sure my app initially displays Splash as ...

Unable to reach redux actions through props while using react router

As someone who is new to working with React and Redux, I've been encountering an issue with accessing my Redux actions from the props when using them alongside React Router. Despite trying various configurations, the props only seem to contain the Rea ...

Issues with jQuery compatibility when used alongside HTML and CSS

My coding tool is flagging errors in my JavaScript file, including: -'$' usage before definition. -Incorrect spacing between 'function' and '(' This is the content of my JS file: $(document).ready(function() { $(window).s ...

Discover the process of loading one controller from another controller in Angular JS

Is it possible to load an entire controller1 from a different controller2, not just a function? ...

The alignment issue with Bootstrap4's align-self-baseline

Is there a way to attach tag buttons to the baseline of the parent div using CSS? If this method is not appropriate, can you suggest an alternative approach? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap ...

Evaluating the distances among various points

Using the Pythagorean Theorem, I aim to calculate the distance between a series of points in an array by iterating through them and identifying the n closest points. However, I'm struggling to determine how to compute the distance (d) between each ite ...

What steps do I need to take to display my background using JavaScript and CSS?

I am currently attempting to utilize a background image in iScroll's JavaScript. The script appears to use CSS within the JavaScript and allows me to add a background color, but for some reason, it is not allowing me to add an image. Is there a way to ...

Can Angular routing be used with a LAMP server?

I have decided to host my Angular 2 application on which offers a traditional LAMP stack for hosting. In my local ng serve environment, the route www.mysite.com/myapp/item/:id functions perfectly. However, when trying to access www.mysite.com/my-app/ite ...

Utilizing React to bind "this" to a method within a class

Currently, I am immersed in a React book that suggests binding methods like this: this.onClickMe = this.onClickMe.bind(this); However, the functionality seems to work perfectly fine without including the above code snippet. class ExplainBindingsComponen ...

Steps to transfer text from one input field to another by clicking a button using JavaScript

Hello, I am new to Javascript so please forgive me if my question seems silly. I have been tasked with creating a form containing two input fields and a button. When the button is clicked, the text entered in the first field should move to the second field ...

The initial directive in Angular: fixed table

Feeling like I'm going in circles, I just can't seem to figure out exactly what needs to be done here. I have a desire to create a directive using the following syntax: <my-table data="(some json)"> <my-column binding="json.propert ...

The value from the textbox is not being received by the JavaScript and PHP

I'm encountering an issue with my codes where they are not properly passing the value of the verification code from the textbox to JavaScript and then to PHP. I need assistance in resolving this issue. Below is the snippet of code: HTML: /* HTML c ...

Breaking up and processing a given string in JavaScript: Splitting and token

When it comes to dealing with this specific JavaScript requirement, the challenge lies in working with a string such as: “ [ condition12 (BRAND) IN 'Beats by Dr. Dre & D\’Silva of type Band’ of type 'IDENTIFIER_STRING’ ] ...

Creating a new component when a click event occurs in React

Currently diving into the world of React while working on a project that involves mapbox-gl. I'm facing an issue where I can successfully log the coordinates and description to the console upon hover, but I can't seem to get the popup to display ...

Retrieving currentUser data using Vue.js, Vuex, Express, and MongoDB

I am currently working on creating a MEVN stack authentication page that displays information about the user who is logged in. After successfully logging in, the router redirects to Home.vue and passes the username as a prop. The onSubmit method in Login. ...

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...