AngularJS - update value of input box in a dynamic table on button click

Question

After having checked various Stackoverflow resources, it looks like I am still unable to figure out the Angular way of doing this. The HTML table, which has just an Id column and another text column (input box), is dynamically populated via ng-repeat. Then I provide "update" and "delete" functions/buttons for each individual record showing inside input box. 'Delete' function seems OK, on 'delete' button click I just pass the ID to the function as argument. With 'update' click event, I am not sure how to pass the value of the input box to the function as a second argument. Please see the simplified markup and code below.

<tr ng-repeat="rec in allRecords">
    <td>{{rec.Id}}</td>
    <td>
        <button ng-click="update(rec.Id, HERE_TEXT_FROM_SIBLING_INPUT')">Update</button>
        <input type="text" value="{{rec.Name}}">
        <button ng-click="deleteMonitorGroup(rec.Id)">Delete</button>
    </td>

And the controller

app.controller('MyCtrl', function (MyService, $scope) {

MyService.listAllRecords(function (allRecs) {
    $scope.allRecords= allRecs;
});

$scope.update = function (Id, text) {

        MyService.update(Id, text, function () {
           // update record
        });
}

});

Any help is appreciated.

Pankaj Parkar · Accepted Answer · 2016-03-30 19:26:31Z

3

Use ng-model there on input fields like ng-model="rec.Name" which keep rec.Name updated by angular two way binding feature.Then do pass ng-model's rec.Name to the updated function OR rather just pass rec object on function call to make it more simpler.

Markup

<tr ng-repeat="rec in allRecords">
    <td>{{rec.Id}}</td>
    <td>
        <button ng-click="update(rec)">Update</button>
        <input type="text" ng-model="rec.Name">
        <button ng-click="deleteMonitorGroup(rec.Id)">Delete</button>
    </td>
</tr>

answered Mar 30, 2016 at 19:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

user2217057 Over a year ago

Thanks for your help and very quick answer, all works fine now!

Collectives™ on Stack Overflow

AngularJS - update value of input box in a dynamic table on button click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related