如何用 angularjs 嵌套表单？答案

【问题标题】：How to nest forms with angularjs?如何用 angularjs 嵌套表单？
【发布时间】：2013-03-09 23:32:57
【问题描述】：

我正在制作一个不是 100%“单页”驱动的应用程序。当我轻松学习这个新的 JS 框架时，我只使用 angular 作为“助手”。我的很多应用程序仍然由普通的 get 和 post 控制，而不是 angular 资源或任何东西。

我有一个由 rails 创建的外部形式（它有一个 action="" 等）。

在这个表单中，我有三个“列表”，有点像 3 种不同的待办事项列表，但都在一个表单中，当他们提交时将发送到 Rails。

在其中一个列表中，用户将看到一个可以添加新任务的文本框。我正在尝试使用户可以在文本框中点击“输入”并将其添加到模型中，但不提交父表单。

我读到我可以用 ngForm 和 angular 来做到这一点（让它看起来像嵌套形式），但我不确定如何做到这一点或有什么问题。这是我的代码：

main.js.coffee

app = angular.module("Messenger", [])

app.factory "NewTasks", ->
  NewTasks = []

@processNewCtrl = ["$scope", "NewTasks", ($scope, NewTasks) ->
  $scope.tasks = NewTasks

  $scope.addTask = ->
    task = $scope.newTask
    task.timestamp = new Date().getTime()
    $scope.tasks.push(task)
    $scope.newTask = {}
]

@processTomorrowCtrl = ["$scope", ($scope) ->
]

view.html.erb

<form action="/stuff">
    <!-- ... boring code-->
    <div ng-controller="processNewCtrl">
        <!-- ... ng-repeat unordered list here for task in tasks -->
        <div class="task">
          <angular ng-form ng-submit="addEntry()">
            <input checked="checked" disabled="disabled" type="checkbox">
            <input ng-model="newTask.description" type="text" autocomplete="off" placeholder="Additional Task description">
          </angular>
        </div> 
    </div>
    <!-- ... -->
</form>

【问题讨论】：

标签： javascript forms angularjs javascript-framework

【解决方案1】：

将ng-form 与ng-submit=mySaveCallback() 一起使用

mySaveCallback() 应该处理数据排序，然后手动发布到后端（使用$http 或$resource 或其他东西）。

通常您不会在 AngularJS 中使用传统的 <form action="submit.html">，因为您通常希望在发送数据之前对其进行处理，或者也以某种方式更新 AngularJS。使用传统的表单请求也会使您更改页面，这也可能是不可取的。

现在，如果您谈论的是保留传统方法（更改页面和传递 POST 数据），老实说，我不知道如何在 Javascript 的头上做到这一点（因为这不是特定于 Angular 的问题） .

但在我看来，您最好完全转换为使用 AngularJS 和 ng-submit 异步提交所有表单。将来也会更容易使用。

【讨论】：