前言
眾所周知AngularJS 中可以使用 ng-repeat 顯示列表數(shù)據(jù)，這對大家來說應(yīng)該都不陌生了， 用起來很簡單， 也很方便， 比如要顯示一個產(chǎn)品表格， Controller 的 Javascript 代碼如下：
angular.module('app', []).controller('MyController', MyController);MyController.$inject = ['$scope'];function MyController($scope) { // 要顯示的產(chǎn)品列表數(shù)據(jù)； $scope.products = [ { id: 1, name: 'Product 1', description: 'Product 1 description.' }, { id: 2, name: 'Product 3', description: 'Product 2 description.' }, { id: 3, name: 'Product 3', description: 'Product 3 description.' } ];}對應(yīng)的 HTML 視圖代碼如下：
<table class="table"> <tr> <th>id</th> <th>name</th> <th>description</th> <th>action</th> </tr> <tr ng-repeat="p in products"> <td></td> <td></td> <td></td> <td><a href="#">Buy</a></td> </tr> </table>
運行效果圖：
可是如果全部頁面都是每個產(chǎn)品占一行來顯示， 未免太枯燥了， 比如用戶希望這樣子自定義顯示：
每個產(chǎn)品占表格的兩行， 這樣的效果用 ng-repeat 就沒辦法實現(xiàn)了。 不過 AngularJS 提供了 ng-repeat-start 和 ng-repeat-end 來實現(xiàn)上面的需求， ng-repeat-start 和 ng-repeat-end 的語法如下：
<header ng-repeat-start="item in items"> Header </header> <div class="body"> Body </div> <footer ng-repeat-end> Footer </footer>
假設(shè)提供了 ['A','B'] 兩個產(chǎn)品， 則生成的 HTML 結(jié)果如下：
<header> Header A </header> <div class="body"> Body A </div> <footer> Footer A </footer> <header> Header B </header> <div class="body"> Body B </div> <footer> Footer B </footer>
了解了 ng-repeat-start 和 ng-repeat-end 的用法之后， 上面要求的界面就很容易實現(xiàn)了， 代碼如下：
<table class="table table-bordered"> <tr ng-repeat-start="p in products"> <td></td> <td rowspan="2"><a href="#">Buy</a></td> </tr> <tr ng-repeat-end> <td></td> </tr> </table>
總結(jié)
以上就是Angular.js中利用ng-repeat-start實現(xiàn)自定義顯示的全部內(nèi)容，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Angular.js能有所幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點
疑難解答
