What is the best way to implement ng-model in an ng-repeat loop within AngularJS?

Question

What is the best way to implement ng-model in an ng-repeat loop within AngularJS?

Can ng-model be utilized inside an ng-repeat loop in AngularJS? My database is mySQL and I am attempting to do this so that I can edit data on the same row where it is displayed. Hopefully, this explanation makes sense.

<tbody ng-repeat="x in names">
    <tr class="edit-row">
        <td>
            <div class="form-group editable">
                <div class="input-group">
                    <input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
            </div>
        </td>
        <td>
            <div class="form-group editable">
                <div class="input-group">
                    <input class="form-control" value="{{x.email}}" disabled /> </div>
            </div>
        </td>
        <td>
            <button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
            <a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
            <a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
            <a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
            <button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone,  x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
            </button>
        </td>
    </tr>
</tbody>

javascript angularjs arrays loops

Answer 1

Answer №1

Here is a possible solution:

<tbody ng-repeat="item in items track by $index">
  <tr class="edit-row">
    <td>
      <div class="form-group editable">
        <div class="input-group">
          <input class="form-control"
            name="item.name" ng-model="item.name_m[$index]"
             value="{{item.name}}" disabled /> </div>
        </div>
      </td>
//... more code can go here

Make sure to use 'track by $index' in your ng-repeat, and access the model using model[$index]. It's also a good idea to initialize the model to null at the beginning of your controller if it's empty:

$onInit() {
  this.name_m = {};
}

Answer 2

Here is a possible solution:

<tbody ng-repeat="item in items track by $index">
  <tr class="edit-row">
    <td>
      <div class="form-group editable">
        <div class="input-group">
          <input class="form-control"
            name="item.name" ng-model="item.name_m[$index]"
             value="{{item.name}}" disabled /> </div>
        </div>
      </td>
//... more code can go here

Make sure to use 'track by $index' in your ng-repeat, and access the model using model[$index]. It's also a good idea to initialize the model to null at the beginning of your controller if it's empty:

$onInit() {
  this.name_m = {};
}

Answer 3

Answer №2

<div ng-repeat="element in elements">
<input ng-model="element.data">
</div>

or connects to

<div ng-repeat="element in elements">
{{ element.dataset }}
</div>

Answer 4

<div ng-repeat="element in elements">
<input ng-model="element.data">
</div>

or connects to

<div ng-repeat="element in elements">
{{ element.dataset }}
</div>

What is the best way to implement ng-model in an ng-repeat loop within AngularJS?

Answer №1

Answer №2

Similar questions

An error will occur if you try to modify the state of a component from outside the component

Pause before proceeding to the next iteration in the loop

Guide on filling in credentials in Facebook popup using Webdriver with Javascript

What is the best way to integrate Google Maps into a Vue component?

Exploring Shader Materials and OpenGL Framebuffers within the realm of THREE.js

What is the best way to integrate passport with the existing bcrypt code in my project?

Retrieve error message from 400 error in AngularJS and WebAPI

Transferring information from a component to a view using this approach

Is it possible to reduce a field value in firestore after successfully submitting a form?

Here's a method for transferring data from one array to another: when there is existing data in the

The file type input is not directing to the correct folder in Internet Explorer version 9

In order to ensure compatibility, the Bootstrap UI Angular Accordian and Rails template should always be structured with

Taking steps when a number is enclosed within a span

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

While iterating through the material-ui rating component, the 'index' value remains constant at 0 within the 'onChange' function

Send the information to MongoDB in the form of an object, utilize it as a query, and then perform

Creating a dynamic nested menu using React and JSON data

Utilizing AngularJS: Triggering a controller function from a directive

Passing a JavaScript variable to PHP resulted in the output being displayed as "Array"

how to implement dynamic water fill effects using SVG in an Angular application