two-tables

tables

by leftstick

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="demo">
  <div 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>
  </div>
</div>

JavaScript

var demo = angular.module('demo', []);

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