參數傳遞到NG-提交

我是新來Angular，我有這樣的簡單形式：參數傳遞到NG-提交

<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的方式嗎？

來源

2013-05-16 jviotti

我會修改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-16 15:47:41 jlb

這仍將輸入值綁定到'scope.field'。 – TheHippo

你是對的，但我不太清楚它在這方面與你的解決方案有什麼不同。 – jlb

我最喜歡這種方法。 – jviotti

做一個小改動，你的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-16 15:44:32 TheHippo

該字段綁定到'model'或'name'？ – Sekai

@Sekai它是綁定到模型。 – SuperCow

我不會說這是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作爲預期。 :)

來源

2013-05-16 15:49:37 Langdon

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-提交=「添加（ '田'）「

來源

2013-11-22 17:02:47 sidarcy

我不知道爲什麼。但我必須用'這個'來使它工作。

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-05 06:33:12 angelokh

-2

警報（的document.getElementById（「條」）的值。）;在控制器這些東西對我來說thnks 在視圖 - > HTML 工作努力形成我

來源

2015-05-28 08:09:41 user2266928

這是它是如何做：

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) 
    }; 
})

來源

2016-03-03 17:06:46

你是男人，男人！ –

@Julio如何獲取提交按鈕的ID與type = submit，如果它有一個ID？ – sajalsuraj

參數傳遞到NG-提交

回答

相關問題