how can I use ng-model inside ng-repeat loop in AngularJS?

Question

How can I use ng-model inside ng-repeat loop in AngularJS ? Database is mySQL and also I am doing this because I want to edit on same row where data display. I think this detail is ok to understand

<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>

use x.fname_m{{index}}

phani indra
– phani indra

2017-10-24 08:43:02 +00:00
Commented Oct 24, 2017 at 8:43 — phani indra
– phani indra, Commented Oct 24, 2017 at 8:43

rrd · Accepted Answer · 2017-10-24 08:52:33Z

2

I would suggest this:

<tbody ng-repeat="x in names track by $index">
  <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[$index]"
             value="{{x.fname}}" disabled /> </div>
        </div>
      </td>
//... rest of your code

Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:

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

answered Oct 24, 2017 at 8:52

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kent Dela Cruz Fueconcillo · Accepted Answer · 2017-10-24 17:15:51Z

0

<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>

or binds

<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>

answered Oct 24, 2017 at 17:15

Kent Dela Cruz Fueconcillo

6965 silver badges15 bronze badges

Collectives™ on Stack Overflow

how can I use ng-model inside ng-repeat loop in AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related