表格
單一個表格
[ng-repeat]
假設ajax的資料如下(url: ajax_json.php)
<?php
$data = array(
0 => array(
'date' => '2016-06-23',
'click' => '999',
'name' => 'line 1',
),
2 => array(
'date' => '2016-06-21',
'click' => '9',
'name' => 'line 2',
),
3 => array(
'date' => '2016-06-20',
'click' => '99',
'name' => 'line 3',
),
);
echo json_encode($data);
?>
設定如下
<div class="PageContent" ng-app="mainApp">
<div ng-controller="tableCtrl">
<table boder='1' id="ListTB">
<tr class="table-header">
<td>date</td>
<td>name</td>
<td>click</td>
</tr>
<tr ng-repeat="x in tb_data">
<td>{{ x.date }}</td>
<td>{{ x.name }}</td>
<td>{{ x.click }}</td>
</tr>
</table>
</div>
</div>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.controller('tableCtrl', function($scope,$http) {
var url = 'ajax_json.php';
$http.post(url).success(function(rp) {
$scope.tb_data = rp;
});
});
</script>
[controller order]
要使用orderByFilter
並使用orderBy(data,sort,[true or false])
html
<div ng-app="orderByExample1" ng-controller="ExampleController">
<pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
<hr/>
<button ng-click="sortBy(null)">Set to unsorted</button>
<hr/>
<table class="friends">
<tr>
<th>
<button ng-click="sortBy('name')">Name</button>
<span class="sortorder" ng-show="orderType === 'name'" ng-class="{reverse: reverse}"></span>
</th>
<th>
<button ng-click="sortBy('phone')">Phone Number</button>
<span class="sortorder" ng-show="orderType === 'phone'" ng-class="{reverse: reverse}"></span>
</th>
<th>
<button ng-click="sortBy('age')">Age</button>
<span class="sortorder" ng-show="orderType === 'age'" ng-class="{reverse: reverse}"></span>
</th>
</tr>
<tr ng-repeat="friend in friends">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div
javascript:
angular.module('orderByExample1', [])
.controller('ExampleController', ['$scope', 'orderByFilter', function($scope, orderBy) {
var friends = [
{name: 'John', phone: '555-1212', age: 10},
{name: 'Mary', phone: '555-9876', age: 19},
{name: 'Mike', phone: '555-4321', age: 21},
{name: 'Adam', phone: '555-5678', age: 35},
{name: 'Julie', phone: '555-8765', age: 29}
];
$scope.orderType = 'age';
$scope.reverse = true;
$scope.friends = orderBy(friends, $scope.propertyName, $scope.reverse);
$scope.sortBy = function(sort) {
$scope.reverse = (sort !== null && $scope.orderType === sort) ? !$scope.reverse : false;
$scope.orderType = sort;
$scope.friends = orderBy(friends, $scope.orderType, $scope.reverse);
};
}]);
整合運用: html:
<style>
.sortorder:after {
content: '\25b2';
}
.sortorder.reverse:after {
content: '\25bc';
}
</style>
<div class="PageContent" ng-app="mainApp">
<div ng-controller="tableCtrl">
<table boder='1' id="ListTB">
<tr class="table-header">
<td>
<a href="javascript:void(0);" ng-click="sortBy('date')">date
<span class="sortorder" ng-show="sortType === 'date'" ng-class="{reverse: sortReverse}"></span>
</a>
</td>
<td>name</td>
<td>click</td>
</tr>
<tr ng-repeat="x in tb_data">
<td>{{ x.date }}</td>
<td>{{ x.name }}</td>
<td>{{ x.click }}</td>
</tr>
</table>
</div>
</div>
mainApp.controller('tableCtrl', ['$scope','$http','orderByFilter',function($scope,$http,orderBy) {
//==預設值==//
$scope.sortType = 'date';
$scope.sortReverse = false;
$scope.sortBy = function(sort) {
$scope.sortReverse = (sort !== null && $scope.sortType === sort)? !$scope.sortReverse : false;
$scope.sortType = sort;
$scope.tb_data = orderBy($scope.tb_data, $scope.sortType, $scope.sortReverse);
};
$scope.getData = function(){
var url = 'ajax_json.php';
$http.post(url).success(function(rp) {
if(!angular.isArray(rp) && angular.isObject(rp)){
rp = $.map(rp, function(el) { return el });
}
$scope.tb_data = rp;
$scope.sortBy($scope.sortType);
return false; //dev
});
}
$scope.getData();
}]);
巢狀表格
html:
<div class="PageContent" ng-app="mainApp">
<div ng-controller="tableCtrl">
<table boder='1' class="tableStyle table-hover table-striped" id="ListTB">
<tr class="table-header">
<th colspan="4" style="text-align:center;">{{dealer_list[dealer]}} - 點擊率</th>
</tr>
<tr class="table-header">
<th><a href="javascript:void(0);" ng-click="sortBy('date')">日期</a><span class="sortorder" ng-show="sortType === 'date'" ng-class="{reverse: sortReverse}"></span></th>
<th><a href="javascript:void(0);" ng-click="sortBy('click')">All</a><span class="sortorder" ng-show="sortType === 'click'" ng-class="{reverse: sortReverse}"></span></th>
<th><a href="javascript:void(0);" ng-click="sortBy('spam_click')">BOT</a><span class="sortorder" ng-show="sortType === 'spam_click'" ng-class="{reverse: sortReverse}"></span></th>
<th><a href="javascript:void(0);" ng-click="sortBy('real_click')">Real</a><span class="sortorder" ng-show="sortType === 'real_click'" ng-class="{reverse: sortReverse}"></span></th>
</tr>
<tr ng-repeat="x in car_click">
<td>{{ x.date }}</td>
<td>{{ x.click }}</td>
<td>{{ x.spam_click }}</td>
<td>{{ x.real_click }}</td>
</tr>
</table>
<br><br>
<div ng-repeat="car_data in car_list" style="margin-top:20px;">
<table boder='1' class="tableStyle table-hover table-striped" id="ListTB">
<tr class="table-header">
<th colspan="4" style="text-align:center;">{{dealer_list[car_data.dealer]}} - 點擊率</th>
</tr>
<tr ng-if="!car_data.noempty" >
<td colspan="4" style="text-align:center">目前沒有資料</td>
</tr>
<tr class="table-header" ng-if="car_data.noempty" >
<th><a href="javascript:void(0);" ng-click="sortBy('date')">日期</a><span class="sortorder" ng-show="sortType === 'date'" ng-class="{reverse: sortReverse}"></span></th>
<th><a href="javascript:void(0);" ng-click="sortBy('click')">All</a><span class="sortorder" ng-show="sortType === 'click'" ng-class="{reverse: sortReverse}"></span></th>
<th><a href="javascript:void(0);" ng-click="sortBy('spam_click')">BOT</a><span class="sortorder" ng-show="sortType === 'spam_click'" ng-class="{reverse: sortReverse}"></span></th>
<th><a href="javascript:void(0);" ng-click="sortBy('real_click')">Real</a><span class="sortorder" ng-show="sortType === 'real_click'" ng-class="{reverse: sortReverse}"></span></th>
</tr>
<tr ng-repeat="x in car_data.data" ng-if="car_data.noempty" >
<td>{{ x.date }}</td>
<td>{{ x.click }}</td>
<td>{{ x.spam_click }}</td>
<td>{{ x.real_click }}</td>
</tr>
</table>
</div>
</div>
</div>
script
var jsontext = '{"status":true,"msg":"","data":{"2":[{"carid":"15811","click":"1","spam_click":"0","real_click":"1","dealer_id":"2","date":"2016-06-20"},{"carid":"31775","click":"4","spam_click":"0","real_click":"4","dealer_id":"2","date":"2016-06-16"},{"carid":"33958","click":"3","spam_click":"0","real_click":"3","dealer_id":"2","date":"2016-06-23"}],"4":[],"11":[{"carid":"50900","click":"1","spam_click":"0","real_click":"1","dealer_id":"11","date":"2016-06-17"},{"carid":"51044","click":"1","spam_click":"0","real_click":"1","dealer_id":"11","date":"2016-06-20"}]},"dealer_list":{"2":"HOT\u8a8d\u8b49\u597d\u8eca","4":"SUM\u512a\u8cea\u56b4\u9078","11":"EasyCar"}}';
//==app==//
var mainApp = angular.module('mainApp', []);
//==table==//
mainApp.controller('tableCtrl', ['$scope','$http','orderByFilter',function($scope,$http,orderBy) {
//==預設值==//
$scope.sortType = 'date'; //order
$scope.sortReverse = false; //true:ase,false:desc
$scope.sortBy = function(sort) {
$scope.sortReverse = (sort !== null && $scope.sortType === sort)? !$scope.sortReverse : false;
$scope.sortType = sort;
$scope.car_click = orderBy($scope.car_click, $scope.sortType, $scope.sortReverse);
for(var key in $scope.car_list){
$scope.car_list[key].data = orderBy($scope.car_list[key].data, $scope.sortType, $scope.sortReverse);
}
};
$scope.getData = function(){
$scope.car_list = [];
var obj;
var rp = JSON.parse(jsontext);
if(rp.status){
$scope.dealer_list = rp.dealer_list;
for(var dealer in rp.data){
var tmp = rp.data[dealer];
if(!angular.isArray(tmp) && angular.isObject(tmp)){
tmp = $.map(rp.data[dealer], function(el) { return el; });
}
$scope.dealer = dealer;
$scope.car_click = tmp;
obj = {
'noempty' : (tmp.length > 0) ? true : false,
'dealer' : dealer,
'sortType' : $scope.sortType,
'sortReverse' : $scope.sortReverse,
'data' : tmp
};
$scope.car_list.push(obj);
}
$scope.sortBy($scope.sortType);
}
};
$scope.getData();
}]);
加總
目前偷懶做法式透過ng-init來達成
[ng-init]
在ng-repeat內宣告
方法一
ng-init="car_data.total.click = car_data.total.click + x.click; "
這樣後面的car_data.total資料就會被改變
值得注意的是data要是numberic，否則會變成字串相加
<table boder='1' class="tableStyle table-hover table-striped" id="ListTB">
<tr ng-if="!car_data.noempty" >
<td colspan="{{show_length + 3}}" style="text-align:center">目前沒有資料</td>
</tr>
<tr class="table-header" ng-if="car_data.noempty" >
<th>All</th>
<th>BOT</th>
<th>Real</th>
</tr>
<tr ng-repeat="x in car_data.data" ng-if="car_data.noempty">
<td ng-init="car_data.total.click = car_data.total.click + x.click; ">{{ x.click }}</td>
<td ng-init="car_data.total.spam_click = car_data.total.spam_click + x.spam_click; ">{{ x.spam_click }}</td>
<td ng-init="car_data.total.real_click = car_data.total.real_click + x.real_click; ">{{ x.real_click }}</td>
</tr>
<tr class="table-header" ng-if="car_data.noempty">
<th colspan="{{show_length - 1}}">total</th>
<td>{{ car_data.total.click }}</td>
<td>{{ car_data.total.spam_click }}</td>
<td>{{ car_data.total.real_click }}</td>
</tr>
</table>
方法二
html:
<tr ng-repeat="x in car_data.data" ng-if="car_data.noempty" ng-init="car_data.total=sumData(car_data.total,x);">
<td>{{ x.click }}</td>
<td>{{ x.spam_click }}</td>
<td>{{ x.real_click }}</td>
</tr>
<tr class="table-header" ng-if="car_data.noempty">
<th colspan="{{show_length - 1}}">total</th>
<td>{{ car_data.total.click }}</td>
<td>{{ car_data.total.spam_click }}</td>
<td>{{ car_data.total.real_click }}</td>
</tr>
script:
mainApp.controller('tableCtrl', ['$scope','$http','orderByFilter',function($scope,$http,orderBy) {
$scope.sumData = function(old,data) {
if(!old.click) old.click = 0;
if(!old.spam_click) old.spam_click = 0;
if(!old.real_click) old.real_click = 0;
old.click += parseInt(data.click);
old.spam_click += parseInt(data.spam_click);
old.real_click += parseInt(data.real_click);
return old;
};
});
[filter]
但有效率問題...
html:
<table>
<tr class="table-header" ng-if="car_data.noempty" >
<th>All</th>
<th>BOT</th>
<th>Real</th>
</tr>
<tr class="table-header" ng-if="car_data.noempty">
<th colspan="{{show_length - 1}}">total</th>
<td>{{ car_data.total.click }}</td>
<td>{{ car_data.total.spam_click }}</td>
<td>{{ car_data.total.real_click }}</td>
</tr>
<tr class="table-header" ng-if="car_data.noempty">
<th colspan="{{show_length - 1}}">total</th>
<td>{{car_data.data|sumData:'click'}}</td>
<td>{{car_data.data|sumData:'spam_click'}}</td>
<td>{{car_data.data|sumData:'real_click'}}</td>
</tr>
</table>
script:
var mainApp = angular.module('mainApp', []);
mainApp.filter('sumData',function(){
return function (data, key) {
console.log(key);
if (typeof (data) === 'undefined' || typeof (key) === 'undefined') {
return 0;
}
var sum = 0;
for (var i = data.length - 1; i >= 0; i--) {
sum += parseInt(data[i][key]);
}
return sum;
};
});