为什么我的表单没有'它不起作用's在ng的内部重复

Why my form doesn't work when it's inside of ng-repeat?

本文关键字：ng 内部 表单 我的 为什么 不起作用      更新时间：2023-09-26

我正在学习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帮我解决问题。答案就在他的答案里。再次非常感谢！）

您使用的是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，我将能够修复您的代码；）

相关文章：