how to modify a particular data under ng-repeat in angularjs

Question

My html code here

<tr ng-repeat="customer in customers">
    <td> {{customer.customer_name}} </td>
    <td> {{customer.mobile}} </td>
</tr>

After executing this code i get 3 <tr>...</tr> blocks like this:

<tr>
 <td>Sailesh</td>
 <td>123456789</td>
</tr>
<tr>
 <td>Mahesh</td>
 <td>123456789</td>
</tr>
<tr>
 <td>Rob</td>
 <td>123456789</td>
</tr>

Now i want to edit (Mahesh to Saiman) by any function or by any angular directive or any other way how can i do that.

So you want to replace every occurrence of Mahesh with Saiman? — Sumit, Jun 03 '16 at 14:18
My concept is when i click on sailesh it will popup a bootstrap modal and at the modal there is a input field having a value sailesh . When i edit sailesh to hemant and submit it will automatically change the sailesh to hemant with out loading the page. — Rajesh Sardar, Jun 08 '16 at 10:04

score 1 · Answer 1 · answered Jun 03 '16 at 15:08

If by edit you mean you just want to directly change the data programmatically you can just access the object from within the array and change the data

$scope.customers[1].customer_name = 'Saiman';

On the other hand if you mean you want to get a text input and change the data then you can use ngModel to bind the input to the property you want to change. Angular will take care of the rest behind the scenes

<tr ng-repeat="customer in customers">
  <td><input type="text" ng-model="customer.customer_name"></td>
</tr>

Combine that with ngIf, ngClick, and a flag property you can switch between a data view and an edit view.

Use ngClick to change a flag property telling your app when you are editing a particular data item

<button ng-click="customer.$editing=!customer.$editing">Edit</button>

This will create a flag named $editing. When it is false just show the data view, and when it is true show the editor. Use ngModel to bind the input to your customer data.

<td ng-if="!customer.$editing"> {{customer.customer_name}}</td>
<td ng-if="customer.$editing"> <input type="text" ng-model="customer.customer_name"> </td>

Demo

angular.module("app",[]).controller("ctrl",function($scope){
  $scope.customers = [{
    customer_name:"Sailesh",
    mobile:"123456789"
  },{
    customer_name:"Mahesh",
    mobile:"123456789"
  },{
    customer_name:"Rob",
    mobile:"123456789"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl" width="70%"> 
  <tr ng-repeat="customer in customers">
    <td ng-if="!customer.$editing"> {{customer.customer_name}}</td>
    <td ng-if="customer.$editing"> <input type="text" ng-model="customer.customer_name"> </td>
    <td> {{customer.mobile}} </td>
    <td><button ng-click="customer.$editing=!customer.$editing">Edit</button></td>
  </tr>
  <tr><td colspan="3">{{customers}}</td></tr>
</table>

Note that using customer.$editing puts a property on the customer object itself. If you do not want to pollute the actual customer object you can use other means like keeping a WeakMap to keep track of the flags.

You kind sir, saved my ass today, thanks for the answer – Vikranth Oct 11 '21 at 15:55 — Vikranth, Oct 11 '21 at 15:55

score 0 · Answer 2 · answered Jun 03 '16 at 14:25

You want to replace Mahesh with Saiman?

<tr ng-repeat="customer in customers">
    <td> {{customer.customer_name.replace('Mahesh', 'Saiman')}} </td>
    <td> {{customer.mobile}} </td>
</tr>

Or

<tr ng-repeat="customer in customers">
    <td> {{customer.customer_name == 'Mahesh' ? 'Saiman' : customer.customer_name}} </td>
    <td> {{customer.mobile}} </td>
</tr>

score 0 · Answer 3 · answered Jun 03 '16 at 14:26

You can do make any changes whatever you want but at first you need to be clear what you want to do. For example if you simply want to replace Mahesh with Saiman for display purpose then you can use angular js filters.

<tr ng-repeat="customer in customers">
    <td> {{customer.customer_name| myFilter}} </td>
    <td> {{customer.mobile}} </td>
</tr>

var app=angular.module('your_app_name');
app.filter(fucntion myFilter(){
return function(value){
if(value==='Mahesh')
return 'Saiman';
return value;
}
});

score 0 · Answer 4 · answered Jun 03 '16 at 14:52

You can edit the name of your customers by directly modifying the array Customers, for example, in a function of your Controller.

$scope.changeMaheshToSaiman = function() {
    for (var i = 0; i < $scope.customers.length; i++) {
    var customer = $scope.customers[i];
    if (customer.customer_name == 'Mahesh') {
        customer.customer_name = 'Saiman';
    }
  }
};

You could, for example, call this function when a button is clicked to change the value of Mahesh to Saiman.

See this Fiddle for a full example.

how to modify a particular data under ng-repeat in angularjs

4 Answers4