[英]Angularjs ng-submit not working inside ng-repeat form
I have this form 我有这个表格
<tr ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
In my controller I have 在我的控制器中
$scope.submit = function() {
console.log('form');
};
If I change ng-submit="submit()" to ng-click="submit()" in button it works, not sure why I am unable to submit the form 如果我在按钮中将ng-submit =“ submit()”更改为ng-click =“ submit()”,则可以正常使用,不确定为什么我无法提交表单
Because multiple same form names are being created. 因为正在创建多个相同的表单名称。 What you should do is you can create dynamic form names inside ng-repeat.
您应该做的是可以在ng-repeat中创建动态表单名称。
<tr ng-repeat="quote in quotes">
<form ng-submit="submit(qut{{$index}}.$valid)" name="qut{{$index}}">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="quote.quote" class="form-control" type="text" name="quote{{$index}}" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
$scope.submit = function(value) {
console.log('form',value);
};
The problem is that you have an illegal html structure by nesting a table > tr
element with a form
. 问题是,通过将
table > tr
元素与form
嵌套在一起,您具有非法的html结构。 That causes the inner input[type=submit]
not to identify his parent form and trigger the submit. 这导致内部
input[type=submit]
无法识别其父表单并触发提交。
I could get your example working by replacing tables
and tr
with div
and td
with spans
. 我可以通过将
tables
和tr
替换为div
并将td
替换为spans
来使您的示例正常工作。
angular.module('myApp', []) .controller('myController', function($scope) { $scope.quotes = [{ business_name: "business_name 1", quote: "quote1", status: 1 }, { business_name: "business_name 2", quote: "quote2", status: 1 }] $scope.submit = function() { console.log('form'); }; }); angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <div ng-controller="myController"> <div ng-repeat="quote in quotes"> <form ng-submit="submit()" name="qut{{$index}}"> <span class="text-left"> {{ quote.business_name }} </span> <span class="text-left"> <span ng-if="quote.quote"> {{ quote.quote }} </span> <span ng-if="!quote.quote"> <input ng-model="qt" class="form-control" type="text" name="quote" /> </span> </span> <span class="text-left"> <span ng-if="quote.status==1"> <input type="submit" class="btn btn-out" value="Quote" /> </span> </span> </form> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.