如何使用angularjs嵌套表单?

时间:2013-03-20 17:40:53

标签: javascript forms angularjs javascript-framework

我正在创建一个不是100%'单页'驱动的应用程序。我只是使用角度作为“助手”,因为我很容易学习这个新的JS框架。很多我的应用程序仍然使用普通的旧版get和post控制,而不是角度资源或任何东西。

我有一个由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>

1 个答案:

答案 0 :(得分:0)

使用ng-formng-submit=mySaveCallback()

mySaveCallback()应处理数据排序,然后手动发布到后端(使用$http$resource或其他内容)。

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

现在,如果您正在谈论保持传统方法(更改页面和传递POST数据),我真的不知道如何在Javascript中使用我的noggin顶部(因为这不是Angular特定的问题)

但在我看来,你最好完全转换为使用AngularJS和ng-submit异步提交所有表单。而且将来也更容易合作。