Best practice for connecting ng-model in ng-repeat

Question

Best practice for connecting ng-model in ng-repeat

I have the following list:

"List": {
"lorem": 127,
"ipson": 5.5,
"dolor": 29,
"sit": 19}

Next, I am utilizing the ng-repeat code below to construct a table with input fields:

<table>
        <tr ng-repeat="(item, weight in settings.list">
            <th>
                <input ng-model="item"></input>
            </th>
            <th>
                <input ng-model="weight"></input>
            </th>
        </tr>
</table>

My main goal is for the ng-model to update the parent scope, but currently, I am unsure of how to achieve this.

javascript angularjs

Answer 1

Answer №1

If you're looking to create a list structure, it should be structured as follows:

list : [
  {
   name : "lorem",
   weight : 127
  },
  {
   name : "haha",
   weight : 12
  }
];

After defining your list, you can display it in a table format using AngularJS:

<table>
        <tr ng-repeat="item in settings.list">
            <th>
                <input ng-model="item.name"></input>
            </th>
            <th>
                <input ng-model="item.weight"></input>
            </th>
        </tr>
</table>

Answer 2

If you're looking to create a list structure, it should be structured as follows:

list : [
  {
   name : "lorem",
   weight : 127
  },
  {
   name : "haha",
   weight : 12
  }
];

After defining your list, you can display it in a table format using AngularJS:

<table>
        <tr ng-repeat="item in settings.list">
            <th>
                <input ng-model="item.name"></input>
            </th>
            <th>
                <input ng-model="item.weight"></input>
            </th>
        </tr>
</table>

Best practice for connecting ng-model in ng-repeat

Answer №1

Similar questions

NodeJS is capable of handling a limited number of requests at a time

Having trouble updating dropdown value with Reactjs

Limiting the length of numbers in Material UI

Personalized animated Reactflow Connection Lines

Organizing into distinct categories using Angular

Using AngularJS to access the properties of a header within a $http request

Utilizing the output from a console.log in a webpage

Switch the div's class after it has faded out

Adjust the $scope variable depending on the size of the screen

Append a constant string to the conclusion of the route parameter

The functionality of passing an ID in Bootstrap Modal is not functioning as expected

Encountering Rendering Issues with EJS Post HTML Conversion

There seems to be a glitch in my JavaScript for loop as it is not iterating for the correct amount that it should

Running a JavaScript function directly in the browser's address bar with GWT

The functionality of app.get('') is malfunctioning in Node.js when it comes to handling query parameters

Utilizing several carets in a single or multiple text areas and input boxes

Running a cfquery in a cfc and passing parameters through AJAX

Mismatch between the format and extension of an HTML table when exporting to Excel

Using the fs module in a React Native application

What is the best way to convert an array of data into a dataset format in React Native?