Повторяющиеся формы в таблице строк с использованием Angularjs

Question

Итак ... Я буквально просматривал интернет, ища решение этой проблемы, и не нашел ответа, который прямо (или косвенно) предлагает ответ.

Я пытаюсь создать несколько форм в таблице с каждой строки заворачивают в <form> теги, как так

<tr ng-repeat="item in items"> 
    <form ng-submit="updateItem(item)"> 
      <td ng-bind="$index + 1"></td> 
      <td ng-bind="item.title"></td> 
      <td><button>Submit</button></td> 
    </form> 
</tr> 

Казалось работать, как предполагалось, пока я не понял, что нг-повтор не был оборачивать <form> тег вокруг <td> тегов, и это закончилось тем, что выглядели как так

<tr ng-repeat="item in items"> 
    ***<form ng-submit="updateItem(item)"></form>*** //The form tags were unwrapped 
      <td ng-bind="$index + 1"></td> 
      <td ng-bind="item.title"></td> 
      <td> 
       ***<button>Submit</button>*** //Buttons don't submit cos no form 
      </td> 
</tr> 

в то время, что я действительно хочу, чтобы достичь что-то вроде

<tr> 
    <form> 
    <td> 
     <button>Hi</button> 
    </td> 
    </form> 
</tr> 
<tr> 
    <form> 
    <td> 
     <button>Hello</button> 
    </td> 
    </form> 
</tr> 

Мне очень понравилась бы помощь в решении этой проблемы.

Answer 1

Ну, благодаря @pegatron и ссылка Stack Overflow он предоставил используя @tjbp ответ, который я закончил с использованием атрибутов формы входных полей и что сделал это для меня. Несмотря на то, что он не был протестирован во всех браузерах, это делает трюк проверки HTML5. Вот что я закончил.

<tr ng-repeat="item in items"> 
<form ng-submit="updateItem(item)" id="{{item.title}}"> 
     <td ng-bind="$index + 1"></td> 
     <td ng-bind="item.title"></td> 
     <td><button form="{{item.title}}">Submit</button></td> 
</form></tr> 

И при этом форма и связанные с ней входы отправляются с помощью нажатия кнопки. Спасибо.

Answer 2

Вы можете объединить ячейки:

<tr ng-repeat="item in items"> 
    <td colspan="3"> 
     <form ng-submit="updateItem(item)"> 
      ... 
     </form> 
    </td> 
</tr> 

Или использовать ngForm директиву вместо form (и добавить подать на ввести вручную):

<tr ng-repeat="item in items" ng-form="myForm"> 
    <td ng-bind="$index + 1"></td> 
    <td ng-bind="item.title"></td> 
    <td><button type="button" ng-click="updateItem(item)">Submit</button></td> 
</tr> 

Answer 3

Вы можете добавить новую таблицу в каждой строке, как это ;

<table> 
<tr ng-repeat="item in items"> 
    <td> 
    <form ng-submit="updateItem(item)"> 
    <table> 
     <tr> 
     <td ng-bind="$index + 1"></td> 
     <td ng-bind="item.title"></td> 
     <td><button>Submit</button></td> 
     </tr> 
    </table> 
    </form> 
    </td> 
</tr> 
</table>