Передача аргументов в ng-submit

Я новичок в 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 способ?

Ответ 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:)

Ответ 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 
   };
}]);

Это самый простой и удобный способ сделать это в angular.

Вы можете начать поиск собственной директивы/службы, которая будет делать то, что вы хотите архивировать, но в зависимости от остального кода, это может быть самым простым и коротким способом.

Ответ 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)
    };
})

Ответ 4

Я бы не сказал это 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 по назначению.:)

Ответ 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>

Примечание: если "поле" является строкой, используйте кавычки ng-submit = "add ('field" ) "

Ответ 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
   };
}]);

Ответ 7

оповещения (. Document.getElementById() значение "бар" ); в контроллере эти вещи работают для меня thnks in view- > html работайте со мной