为什么我的表单在 ng-repeat 中时不起作用？答案

【问题标题】：Why my form doesn't work when it's inside of ng-repeat?为什么我的表单在 ng-repeat 中时不起作用？
【发布时间】：2016-07-13 09:37:11
【问题描述】：

我正在学习 AngularJS，我正在制作简单的任务管理应用程序。应用程序正在连接到外部休息服务。我尝试使用添加任务按钮在活动（任务的容器）中呈现我的所有任务，但是当表单处于循环状态时，它不会发送任何内容。

这是我的 html 代码：

<div id="task-group" ng-repeat="activity in activities | filter:query">
        <p>
        <h2>{{activity.activityName}}</h2></p>
        {{activity.activityId}}
        <form name="form" ng-submit="addTask()">
        <input type="text" ng-model="sendTaskName">
        <input type="hidden" name="{{activity.activityId}}" >
            <input type="submit" class="btn-primary" value="Add task">
        </form>
        <ul class="task-list">
            <li ng-repeat="task in activity.tasks">
                <p>{{task.taskName}}</p>
            </li>
        </ul>
    </div>

在我的控制器中添加任务功能：

$scope.addTask = function(){
      $http({
          method: 'POST',
          url: 'http://localhost:8080/add-task',
          data: {taskName: $scope.sendTaskName, activityId: $scope.sendActivityId}
      }).success(function(){
          getActivities()
          $scope.sendTaskName = ''
      })
  }

编辑：@Mickael 帮助我解决我的问题。解决方案就在他的回答中。再次非常感谢您！ ;)

【问题讨论】：

您应该创建一个 plunkr 来重现您的问题并将其发布在这里
您确定没有发送任何内容吗？使用浏览器开发工具网络检查实际请求。页面是否与 API 在 .. 8080 上的端口完全相同？还应该添加一个错误处理程序
@charlietfi 我用的是浏览器工具，参数为空。该页面位于 api 以外的其他端口（API：8080，页面：6666）

标签： javascript angularjs rest forms

【解决方案1】：

您正在使用ng-repeat，并且在每次迭代中，您将输入与ng-model 指令绑定。

这里发生的情况是，在每次迭代中，都会创建一个新范围。当您开始在输入中输入时，sendTaskName 变量会在迭代范围内创建，而不是在控制器范围内。

当你的表单被提交时，你提交了你的控制器范围的变量，这就是你不发送任何东西的原因。

为了解决你的问题，我建议你给你的addTask方法提供参数：

 <div id="task-group" ng-repeat="activity in activities | filter:query">
    <p>
    <h2>{{activity.activityName}}</h2></p>
    {{activity.activityId}}
    <form name="form" ng-submit="addTask(activity.activityId, sendTaskName); sendTaskName = '';">
        <input type="text" ng-model="sendTaskName">
        <input type="submit" class="btn-primary" value="Add task">
    </form>
    <ul class="task-list">
        <li ng-repeat="task in activity.tasks">
            <p>{{task.taskName}}</p>
        </li>
    </ul>
</div>

并在您的控制器中使用这些参数：

$scope.addTask = function(activityId, taskName) {
  $http({
      method: 'POST',
      url: 'http://localhost:8080/add-task',
      data: {taskName: taskName, activityId: activityId}
  }).success(function(){
      getActivities();
  })
}

下一次，通过 plunkr，我将能够修复您的代码；）

【讨论】：