Question

我的HTML代码

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

执行此代码后，我得到3个<tr>...</tr>块，如下所示：

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

现在我想通过任何函数或任何角度指令或任何其他方式编辑（Mahesh到Saiman）我该怎么做。

Answer 1

您想将Mahesh替换为Saiman？

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

或者

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

Answer 2

您可以随意进行任何更改，但首先您需要清楚自己想做什么。例如，如果您只是想将Shesman替换为Mahesh用于显示目的，那么您可以使用角度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;
}
});

Answer 3

您可以通过直接修改数组Customers来编辑客户的名称，例如，在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';
    }
  }
};

例如，您可以在单击按钮将Mahesh的值更改为Saiman时调用此函数。

有关完整示例，请参阅this Fiddle。

Answer 4

如果通过编辑意味着您只想以编程方式直接更改数据，则只需从数组中访问对象并更改数据

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

另一方面，如果您想要获取文本输入并更改数据，则可以使用ngModel将输入绑定到要更改的属性。 Angular将负责幕后的其他工作

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

将其与ngIf，ngClick和标志属性相结合，您可以在数据视图和编辑视图之间切换。

在编辑特定数据项时，使用ngClick更改告诉您的应用的标记属性

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

这将创建一个名为$editing的标志。如果为false则只显示数据视图，如果为true则显示编辑器。使用ngModel将输入绑定到客户数据。

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，使用customer.$editing会在customer对象本身上放置一个属性。如果您不想污染实际的客户对象，可以使用其他方法，例如保持WeakMap跟踪标记。

如何在angularjs中修改ng-repeat下的特定数据

4 个答案: