<!DOCTYPE html>
<html ng-app="appModule">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="app.js"></script>
<script src="jsonMethod.js"></script>
</head>
<body ng-controller="appController as appCtrl" class="container-fluid">
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" ng-disabled="true" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
<input type="text" ng-model="appCtrl.search" class="form-control">
</div>
<div class="list-group">
<a href="#" class="list-group-item"
ng-repeat="item in appCtrl.datasource|orderBySource:appCtrl.sortExpression|filter:appCtrl.search">
{{item.name}}
{{item.age}}
current Index:{{appCtrl.getCurrentIndex(item)}}
</a>
<!--and you can try origin orderBy like this-->
<!-- <a href="#" class="list-group-item"
ng-repeat="item in appCtrl.datasource|orderBy:appCtrl.sortExpression|filter:appCtrl.search">
{{item.name}}
{{item.age}}
current Index:{{appCtrl.getCurrentIndex(item)}}
</a> -->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3><span class="label label-info">Before Sorted</span></h3>
<p>
<pre>
{{appCtrl.originSource|json}}
</pre>
</div>
<div class="col-xs-6">
<h3><span class="label label-info">After Sorted</span></h3>
<p>
<pre>
{{appCtrl.datasource|json}}
</pre>
</div>
</div>
</body>
</html>
/**
* Created by WillChen on 2014/10/13.
*/
(function(){
angular.module('jsonMethodModule',[])
.service('jsomMethodService',function($q,$http){
var getJson = function(url){
var deferred = $q.defer();
$http.get(url).success(function(data,status, headers, config){
deferred.resolve(data);
}).error(function (data, status, headers, config){
deferred.reject(data);
});
return deferred.promise;
}
return{
getJson: getJson
};
})
})();
/**
* Created by Administrator on 2014/12/14.
*/
(function () {
angular.module('appModule', ['jsonMethodModule'])
.filter('orderBySource', function () {
var sortByString = function (a, b, field) {
return (a[field] > b[field] ? 1 : a[field] < b[field] ? -1 : 0);
};
var sortByArray = function (a, b, fields) {
var i = 0, result = 0;
while (result === 0 && i < fields.length) {
result = sortByString(a, b, fields[i]);
i++;
}
return result;
};
return function (datasource, args, reverse) {
if (!datasource) return;
if (angular.isString(args)) {
datasource.sort(function (a, b) {
return sortByString(a, b, args);
});
} else if (angular.isArray(args)) {
datasource.sort(function (a, b) {
return sortByArray(a, b, args);
});
} else if (angular.isFunction(args)) {
datasource.sort(args);
}
if (reverse) datasource.reverse();
return datasource;
};
})
.controller('appController',['jsomMethodService',function (jsomMethodService) {
var self = this;
self.sortExpression = ['name','age'];
//and you can using string to sort a field
//self.sortExpression = 'name';
//-----------------------------------------
//and you can using call back function to custom sort
//self.sortExpression = function(a,b){//sort by age
// return a.age - b.age;
//};
jsomMethodService.getJson('MySortData.json').then(function(data){
self.originSource = angular.copy(data);
self.datasource = angular.copy(data);
})
self.getCurrentIndex = function(item){
return self.datasource.indexOf(item);
}
}])
})()
[
{
"name": "j",
"age": "18"
},
{
"name": "a",
"age": "17"
},
{
"name": "b",
"age": "19"
},
{
"name": "b",
"age": "20"
}
]