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 =＆＃34; submit（）＆＃34;到ng-click =＆＃34; submit（）＆＃34;在按钮它工作，不知道为什么我无法提交表格

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>

Angularjs ng-submit不在ng-repeat形式内工作

2 个答案: