angular.js - angular如何实现一个界面两个table模块并存呢？

Question

如图：

上下两个都是数据表，如何实现呢？

Answer 1

Beri anda contoh kecil untuk dimainkan: 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);
    };
});