AngularJS中ng-repeat动态输入控件的单独数据获取咨询

我来帮你搞定这个问题～你现在遇到的核心问题是：所有通过ng-repeat生成的输入框都绑定到了同一个day1、day2这类全局变量上，导致不管修改哪个任务的输入框，都会覆盖同一个变量的值，自然没法区分每个任务对应的数据。下面是具体的修改方案，分三步来：

1. 调整前端HTML的ng-model绑定逻辑 #

原来的输入框要么绑定到全局变量，要么没绑定ng-model，我们需要把每个输入框的数据和当前循环的单个任务关联起来。修改后的代码如下：

<tr ng-repeat="task in tasks">
  <td>{{task.name}}</td>
  <td><input type="text" ng-model="task.days.day1"></td>
  <td><input type="text" ng-model="task.days.day2"></td>
  <td><input type="text" ng-model="task.days.day3"></td>
  <td><input type="text" ng-model="task.days.day4"></td>
  <td><input type="text" ng-model="task.days.day5"></td>
  <td><input type="text" ng-model="task.days.day6"></td>
  <td><input type="text" ng-model="task.days.day7"></td>
</tr>

这里把每个任务的名称改为task.name，输入框的ng-model绑定到task.days.dayX，确保每个任务的输入数据都存在自己的独立空间里。

2. 修改AngularJS控制器，将任务字符串转为对象数组 #

后端返回的是纯任务名称的字符串数组，我们需要把每个字符串转换成带days属性的对象，这样才能存储对应的每日输入数据。修改后的控制器代码：

var fetch = angular.module('myApp', []);
fetch.controller('myController', ['$scope', '$http', function ($scope, $http) {
  $http({
    method: 'get',
    url: 'getTasks.php'
  }).then(function successCallback(response) {
    // 将后端返回的任务字符串转换为包含name和days的对象
    $scope.tasks = response.data.map(taskName => ({
      name: taskName,
      days: {
        day1: '',
        day2: '',
        day3: '',
        day4: '',
        day5: '',
        day6: '',
        day7: ''
      }
    }));
  });

  // 新增方法：获取所有任务的输入数据（比如提交时调用）
  $scope.getTaskData = function() {
    // 此时$scope.tasks里每个元素都包含任务名和对应的7天输入值
    console.log("所有任务数据：", $scope.tasks);
    // 你可以在这里把数据发送到后端，或者做其他处理
  };
}]);

3. 后端PHP代码无需修改 #

你的后端返回的任务名称数组完全可以直接用，前端已经做了对象转换的处理。

为什么这样改能解决问题？ #

原来的task是字符串类型，没法附加自定义属性；现在我们把每个任务变成一个对象，每个对象都有自己独立的days属性来存储7天的输入值，这样不同任务的输入数据就不会互相覆盖了。当用户填写完输入框后，你只需要遍历$scope.tasks，就能拿到每个任务对应的所有每日数据，完全是分开独立的。

比如你可以在页面加一个按钮快速验证：

<button ng-click="getTaskData()">查看所有任务数据</button>

点击后就能在控制台看到每个任务的完整数据啦～

内容的提问来源于stack exchange，提问作者Anuja Kulkarni