javascript - 为什么我的表单在 ng-repeat 内部时不起作用？

Question

我正在学习 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>

在我的 Controller 中添加任务功能:

$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 帮助我解决我的问题。解决方案就在他的回答中。再次非常感谢您! ;)

Answer 1

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

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

提交表单时，您提交了 Controller 范围的变量，这就是您不发送任何内容的原因。

为了解决您的问题，我建议您为 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>

并在 Controller 中使用这些参数:

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

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