使用Angularjs的每個表格行的重複表格

所以......我已經逐字搜索互聯網尋找解決這個問題的方法，並沒有找到任何直接（或間接）表明答案的答案。使用Angularjs的每個表格行的重複表格

我想，每排一個表中創建多個形式被包裹在<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>

似乎按預期工作，直到我意識到，NG-重複沒有包裹<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>

我真的很喜歡一些如何處理這個問題的幫助。

來源

2015-12-01 Cozzbie

我推測原因是你不能在'tr'中直接使用'form'標籤。爲什麼不把'form'放在'td'標籤中？ –

您的解決方案在這裏：http://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml- valid-way – pegatron

有趣的是，我在我的問題中展示的第三個例子效果很好。謝謝@TjaartvanderWalt – Cozzbie

好了，感謝@pegatron和他使用@tjbp答案，我結束了使用輸入字段的形式屬性，並且爲我做提供的Stack Overflow鏈接。雖然沒有在所有瀏覽器上進行過測試，但它確實可以處理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>

隨着這個表單及其鏈接的輸入與按鈕點擊發送。謝謝。

來源

2015-12-01 13:45:45 Cozzbie

對於無效的HTML，您是否確定這在所有瀏覽器中都可以使用？不同的瀏覽器處理錯誤的方式不同因此，無論何時發佈新版本的瀏覽器，您都必須進行非常徹底的測試。 @Petrontron的解決方案和鏈接答案是無誤的HTML。 –

@MrLister查看這個[鏈接]（http://caniuse.com/form-attribute）它表明唯一不支持它的瀏覽器是IE。是的，我意識到這是一個巨大的只有...嘆了口氣。 – Cozzbie

我不是在討論'

可以團結的細胞：

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

來源

2015-12-01 12:48:16 karaxuna

第二種方法是唯一的全角度解決方案，應該是被接受的答案。適用於所有瀏覽器，您也可以使用myForm來驗證該行。 –

你可以這樣每一行中添加一個新表;

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

來源

2015-12-01 12:54:28 pegatron

使用Angularjs的每個表格行的重複表格

回答

相關問題