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>

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

$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指令绑定输入。

这里发生的是每次迭代时都会创建一个新的范围。当您在输入内部开始输入时，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，我将能够修复您的代码;）

为什么我的表格在ng-repeat里面不起作用？

1 个答案: