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教程，其中有一些列表被管理，并且新项目被添加到该列表中，您几乎总会看到其中一个属性倾向于“徘徊”＃34; （他们经常被命名为＆＃39; newItem＆＃39;等等）。在某种程度上，这个是 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 directive，并将输入值传递给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。：）

Answer 5

<强> 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：

<script>
function MyFormController($scope) {
   $scope.add= function(field) {
      alert(field)
   }
}
</script>

注意：如果'field'是一个字符串，请使用引号ng-submit =“add（'field'）”

Answer 6

我不确定为什么。但是我必须使用'this'才能使它工作。

HTML：

<div ng-controller="MyFormController">
  <form ng-submit="add()">
    <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() { 
     console.log(this.field) // <-- this works for me
   };
}]);

Answer 7

警报（的document.getElementById（ “条”）值）;在控制器中这些东西对我有用在视图中 - ＆gt; html 我的工作

将参数传递给ng-submit

7 个答案: