AngularJS如何追踪每行更新并将数据提交至后端

嘿，刚接触AngularJS对吧？我帮你梳理下怎么实现追踪复选框/下拉框变更并提交的功能，咱们一步步调整你的代码：

先理清楚现有代码的小问题 #

你的复选框只用了ng-checked，这只是单向显示状态，不会把用户的勾选操作同步到d.check属性里，这是第一个要修复的点；另外还需要一个机制来记录哪些行被修改过，这样提交时只发变更的数据（或者全量标记变更，看你需求）。

修改后的完整实现代码 #

控制器代码（app.js）

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Need to update Row that I have changed';
  // 用来存储所有被修改过的行数据
  $scope.changedItems = [];

  // 标记行数据为已修改
  $scope.markAsChanged = function(item) {
    // 先检查是否已经在变更列表里，避免重复添加
    var exists = $scope.changedItems.some(function(changedItem) {
      return changedItem.firstName === item.firstName && changedItem.lastName === item.lastName;
    });
    if (!exists) {
      // 用Object.assign创建副本，避免后续修改影响已记录的变更
      $scope.changedItems.push(Object.assign({}, item));
    }
  };

  $scope.submitButton = function(){
    if ($scope.changedItems.length === 0) {
      alert("没有任何变更需要提交！");
      return;
    }
    // 提交到后端的逻辑，实际项目替换成你的接口地址
    $http.post('/your-backend-api-url', $scope.changedItems)
      .then(function(response) {
        alert("提交成功！");
        // 提交成功后清空变更列表
        $scope.changedItems = [];
      })
      .catch(function(error) {
        alert("提交失败：" + error.message);
      });
    // 控制台打印变更数据，方便测试查看
    console.log("要提交的变更数据：", $scope.changedItems);
  }

  $scope.cities = ["Austin", "Leander", "RoundRock"];
  $scope.data = [
    {check:'active',firstName:'James',lastName:'Austin',city:'Leander'},
    {check:'inactive',firstName:'Niki',lastName:'Jones',city:'Austin'},
    {check:'active',firstName:'Amy',lastName:'Parker',city:'RoundRock'}
  ];
});

HTML代码

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <table>
    <thead>
      <th>Active</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th> City</th>
    </thead>
    <tbody>
      <tr ng-repeat="d in data">
        <!-- 修复复选框双向绑定，匹配原有字符串值 -->
        <td>
          <input 
            type="checkbox" 
            ng-model="d.check" 
            ng-true-value="'active'" 
            ng-false-value="'inactive'"
            ng-change="markAsChanged(d)"
          />
          {{d.check}}
        </td>
        <td>{{d.firstName}}</td>
        <td>{{d.lastName}}</td>
        <td>
          <select 
            ng-model="d.city" 
            ng-change="markAsChanged(d)"
            ng-options="c for c in cities"
          ></select>
        </td>
      </tr>
    </tbody>
  </table>
  <button type="button" ng-click="submitButton()">Submit</button>
</body>
</html>

关键改动说明 #

• 复选框双向绑定：用ng-model="d.check"替代ng-checked，同时通过ng-true-value和ng-false-value让复选框的布尔状态对应你原本的active/inactive字符串值，用户操作时会自动更新数据模型。
• 变更追踪：新增markAsChanged函数，每次复选框或下拉框修改时触发，把修改后的行数据加入到changedItems数组，还做了去重处理避免重复记录。
• 提交逻辑：在submitButton里，通过$http.post把变更数据发送到后端接口，提交成功后清空变更列表；如果没有变更会提示用户。

这样你就能准确追踪所有修改过的行，点击提交时把这些数据发送给后端啦！

内容的提问来源于stack exchange，提问作者Jr.SD