1

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.

3
  • So you want to replace every occurrence of Mahesh with Saiman? Commented Jun 3, 2016 at 14:18
  • what exactly do you want to do? Commented Jun 3, 2016 at 14:20
  • 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. Commented Jun 8, 2016 at 10:04

4 Answers 4

1

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.

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

1 Comment

You kind sir, saved my ass today, thanks for the answer
0

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>

Comments

0

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;
}
});

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.