如何使用angularjs嵌套表格？

Question

我制作的應用程序不是100％“單頁”驅動的。 在我輕松學習這個新的JS框架時，我只是將angular用作“幫助器”。 我的許多應用程序仍由普通的舊版get和post（而非角度資源或其他任何東西）控制。

我有一個由rails創建的外部表單（它有一個action =“”等）。

在此表單中，我有3個“列表”，有點像3種不同的待辦事項列表，但全部以一種形式存在，當他們提交時會發送到rails。

在列表之一中，用戶將看到一個文本框，他們可以添加新任務。 我正在嘗試使其能夠使用戶可以在文本框中單擊“輸入”，並將其添加到模型中，但無需提交父表單。

我讀過我可以使用ngForm來做到這一點（使它看起來像嵌套表格一樣），但是我不確定如何做到這一點或出了什么問題。 這是我的代碼：

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>

Answer 1

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

mySaveCallback()應該處理數據排序，然后手動發布到后端（使用$http或$resource或其他方式）。

通常，您不使用AngularJS中的傳統<form action="submit.html"> ，因為您通常希望在發送數據之前先對數據進行處理，或者也要以某種方式更新AngularJS。 使用傳統的表單請求也將使您更改頁面，這也是不希望的。

現在，如果您要談論保持傳統方法（更改頁面和傳遞POST數據），老實說，我不知道如何在Java腳本中做到這一點（因為這不是特定於Angular的問題）。

但是我認為，最好是完全轉換為使用AngularJS和ng-submit異步提交所有表單。 而且將來也會更容易使用。