angular.js - angular如何實現一個界面兩個table模塊并存呢？

問題描述

如圖：

上下兩個都是數據表，如何實現呢？

問題解答

給你個小例子玩玩看：jsfiddle

<p ng-controller='DemoCtrl'> <table border='1'> <tr ng-repeat='item in table1' ng-click='showDetail(item)'> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </table> <table border='1'> <tr ng-repeat='item in table2'> <td>{{ item.address }}</td> <td>{{ item.email }}</td> </tr> </table></p>

demo.controller(’DemoCtrl’, function($scope){ $scope.table2 = [];$scope.table1 = [{ id: 1, name: ’Hanmeimei’, age: 31, detail: [{address: ’Zhongguo’,email: ’Hmm@sohu.com’ }]},{ id: 2, name: ’Lilei’, age: 32, detail: [{address: ’Yindu’,email: ’Ll@gmail.com’ }]} ];$scope.showDetail = function(item){$scope.table2.length = 0;Array.prototype.push.apply($scope.table2, item.detail); };});