20

我是新手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的方式？

4

7 回答 7

20

我会稍微修改 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 的方式 :)

于 2013-05-16T15:47:41.187 回答
12

对你的 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 
   };
}]);

这是您可以在角度上做到这一点的最简单和预期的方式。

您可以开始考虑编写一个自己的指令/服务来执行您想要归档的操作，但是根据您其余的代码，这可能是最简单和最短的方法。

于 2013-05-16T15:44:32.173 回答
6

这是这样做的：

表单.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>

控制器.js

.controller('productCtrl', function($scope) {
    $scope.create = function(product){
        console.log(product)
    };
})
于 2016-03-03T17:06:46.383 回答
5

我不会说这是 Angular 的方式，但它就是这样，而且我认为我将要告诉你的内容更清晰。

您可以使用表单指令，并将输入的值传递给您的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 。:)

于 2013-05-16T15:49:37.163 回答
2

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')"

于 2013-11-22T17:02:47.033 回答
0

我不确定为什么。但我必须使用“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
   };
}]);
于 2014-03-05T06:33:12.890 回答
-2

alert(document.getElementById("bar").value); 在控制器中，这些东西对我有用 thnks in view->html work form me

于 2015-05-28T08:09:41.900 回答