angular.js - angular如何實(shí)現(xiàn)一個(gè)界面兩個(gè)table模塊并存呢?
問題描述
如圖:
上下兩個(gè)都是數(shù)據(jù)表,如何實(shí)現(xiàn)呢?
問題解答
回答1:給你個(gè)小例子玩玩看: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); };});
相關(guān)文章:
1. 查詢mysql數(shù)據(jù)庫中指定表指定日期的數(shù)據(jù)?有詳細(xì)2. mysql - 怎么生成這個(gè)sql表?3. mysql儲存json錯(cuò)誤4. php - 公眾號文章底部的小程序二維碼如何統(tǒng)計(jì)?5. mysql - 表名稱前綴到底有啥用?6. mysql - 數(shù)據(jù)庫表中,兩個(gè)表互為外鍵參考如何解決7. Navicat for mysql 中以json格式儲存的數(shù)據(jù)存在大量反斜杠,如何去除?8. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實(shí)現(xiàn)存在即更新應(yīng)該使用哪個(gè)標(biāo)簽?9. mysql - 數(shù)據(jù)庫建字段,默認(rèn)值空和empty string有什么區(qū)別 11010. sql語句 - 如何在mysql中批量添加用戶?
