AngularJS ng-submit無法在ng-repeat表單中工作

Question

我有這個表格

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

在我的控制器中

$scope.submit = function() {
        console.log('form');
    };

如果我在按鈕中將ng-submit =“ submit（）”更改為ng-click =“ submit（）”，則可以正常使用，不確定為什么我無法提交表單

Answer 1

因為正在創建多個相同的表單名稱。 您應該做的是可以在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);
};

Answer 2

問題是，通過將table > tr元素與form嵌套在一起，您具有非法的html結構。 這導致內部input[type=submit]無法識別其父表單並觸發提交。

我可以通過將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>