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); };});