如何使用ng-model更改表中运行时的记录

Posted 2021-04-09

如何在表中使用ng-model并在运行时更改值，

我在桌子上有多个记录显示，有两个<td>有日期选择器，开始日期，结束日期。我想要在多行中更改日期，当我使用ng-model更改我的日期特定行时，它会更改所有行的日期，如何使用ng-model更改特定行数据，

<tr ng-repeat="row in showAddedAssets  ">           
 <td >  <md-datepicker  id="startmd"name="plainnedstartdate" ng-change="createCampaign.changedate(row)"  ng-model="createCampaign.assets_planned_start_date" required></md-datepicker></td>
 <td  >  <md-datepicker name="plainnedenddate"  ng-change="createCampaign.changedate(row)" ng-model="createCampaign.assets_planned_end_date" required></md-datepicker></td>
                  </tr>
                  </tbody>
</table>

JS文件

changedate(assetitem)
 {
   assetitem.assets_planned_start_date = this.assets_planned_start_date ;
   assetitem.assets_planned_end_date  = this.assets_planned_end_date;
 }

答案

您应该为每个行项添加不同的ng-model

<tr ng-repeat="row in showAddedAssets  ">
    <td>  <md-datepicker id="startmd" name="plainnedstartdate" ng-change="changedate(row)" ng-model="row.createCampaign.assets_planned_start_date" required></md-datepicker></td>
    <td>  <md-datepicker name="plainnedenddate" ng-change="changedate(row)" ng-model="row.createCampaign.assets_planned_end_date" required></md-datepicker></td>
</tr>

所以在你的控制器中你可以更新该行的日期

$scope.changedate = function(row)
 {
   row.assets_planned_start_date = some_date;
   row.assets_planned_end_date  = some_date;
 }

另一答案

你应该改变html

<tr ng-repeat="row in showAddedAssets ">           
 <td >  <md-datepicker  id="startmd_{{$index}} "name="plainnedstartdate" ng-change="createCampaign.changedate(row)"  ng-model="row.assets_planned_start_date" required></md-datepicker></td>
 <td  >  <md-datepicker id="endmd_{{$index}}" name="plainnedenddate"  ng-change="createCampaign.changedate(row)" ng-model="row.assets_planned_end_date" required></md-datepicker></td>
                  </tr>

和js文件，因为你想要更改所有行，所以你应该使用angular.forEach进行这项工作。

    changedate(row)
     {
       angular.forEach(this.showAddedAssets , function(item){
                item.assets_planned_start_date = row.assets_planned_start_date;
                item.assets_planned_end_date = row.assets_planned_end_date
        })
     }