angular.js - angular如何實現(xiàn)一個界面兩個table模塊并存呢?
問題描述
如圖:
上下兩個都是數(shù)據(jù)表,如何實現(xiàn)呢?
問題解答
回答1:給你個小例子玩玩看: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. python - Scrapy存在內(nèi)存泄漏的問題。2. python - 在使用Pycharm時經(jīng)常看到如下的樣式,小括號里紅色的部分是什么意思呢?3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?4. javascript - 移動端粘貼事件,onpaste事件在app中無效,在app中怎么監(jiān)測到粘貼事件5. mac連接阿里云docker集群,已經(jīng)卡了2天了,求問?6. javascript - 關(guān)于fullpage.js 自動高度失效的問題7. javascript - Express 和 request 如何代理遠(yuǎn)程圖片?8. javascript - 你們怎樣實現(xiàn)前端分頁的?9. android - react-native 的headless.js Java API 的代碼怎么使用?10. 如何使用git對word文檔進行版本控制?
