将参数传递给ng-submit

Question

我是新手Angular,我有这个简单的形式:

<form ng-submit="add()">
  <input type="text" name="field">
  <input type="submit" value="Submit">
</form>

我想把input[name="field"]价值作为参数add().有没有办法做到这一点？

到目前为止我所做的是分配ng-model="field"输入和内部add()查找$scope.field.

在控制器中,我有一个项目数组和add()功能.这$scope.field是一个中间步骤,以获得add()我不应该需要的输入值.

我错过了什么或者是Angular的方式吗？

Answer 1

我会稍微修改TheHippo的答案并field作为参数传递给add().这更像是代码设计的选择,但我认为它可以提供更大的灵活性和更好的测试.

HTML:

<div ng-controller="MyFormController">
  <form ng-submit="add(field)">
    <input type="text" name="field" ng-model="field" />
    <input type="submit" value="Submit" />
  </form>
</div>

JS:

app.controller('MyFormController', ['$scope', function(scope) {
   scope.add = function(field) { // <-- here is you value from the input 
     // ...
   };
}]);

还有一点注意事项:如果您在线跟踪大多数AngularJS教程,其中有一些列表被管理,并且新项目被添加到该列表中,您几乎总会看到其中一个属性倾向于"徘徊"(它们经常出现)名为'newItem'等.在某种程度上,这是 AngularJS方式:)

Answer 2

对您做一个小改动HTML:

<form ng-submit="add()">
  <input type="text" name="field" model="field">
  <input type="submit" value="Submit">
</form>

在包含表单的控制器(/指令)中:

app.controller('MyFormController', ['$scope', function(scope) {
   scope.add = function() {
     scope.field // <-- here is you value from the input 
   };
}]);

这是角度最简单,最有效的方法.

您可以开始考虑编写一个自己的指令/服务,它将执行您想要存档的内容,但是根据您的其余代码,这可能是最简单和最短的方式.

Answer 3

这是如何做到的:

form.html

<form ng-submit="create(product)">
    <input ng-model="product.name" class="u-full-width" type="text" id="name">
    <input ng-model="product.price" class="u-full-width" type="number" id="price">
    <input class="button-primary" type="submit" value="Submit">
</form>

controller.js

.controller('productCtrl', function($scope) {
    $scope.create = function(product){
        console.log(product)
    };
})

Answer 4

我不会说这是Angular的方式,但它是如何发展的,而且我认为我要告诉你的更清洁.

您可以使用form指令,并将输入值传递给您的add方法.不幸的是,ngForm要求你使用ngModel,所以它是一种洗涤方式.

http://jsfiddle.net/unsWy/

<div ng-app>
    <form name="myForm" ng-submit="add(myForm.field.$viewValue)" ng-controller="x">
        <input type="text" ng-model="field" name="field" required>
        <input type="submit" value="Submit">
    </form>
</div>    

ngForm根据字段名称而不是模型属性进行操作,因此如果您愿意,您可以使用ngModel输入中的指令创建并隐藏它们,这样它们就不会"妨碍",可以这么说:

<input type="text" name="field" ng-model="$$ignore.field" required>

也就是说,你可能最好只使用$ scope.:)