piotrkabacinski
12/21/2015 - 2:43 PM

Universal lists ordering in Angular 1.4.x / Keywords: order list selector service sort

Universal lists ordering in Angular 1.4.x / Keywords: order list selector service sort

sortingService.js
content_copyfile_download
"use strict";

sortApp.service( "orderHandler" , function() {
  
  /*
    @param list - id of element to be sorted declared by "data-table-id" attribute value
    @param sortBy - sorting pattern declared by "data-sort-id" attribute value
  */

	this.sort = function( list , sortBy ) {

		// Get specific table and selector
		var table = document.querySelector("[data-table-id="+list+"]"),
			current = table.getElementsByClassName("sort")[0],
			sort;

		// If there was a selection already get its settings
		if( current ) {

			var currentName = current.getAttribute("data-sort-id"),
			  	currentSortingMethod = current.classList.contains("up");

			// Remove selection
			current.classList.remove( "sort" , "up" , "down" );

		}

		switch( sortBy == currentName ) {

			case true:

				switch( currentSortingMethod ) {

					case true:

						sort = "-"+currentName;
						current.classList.add( "sort" , "down" );

					break;

					case false:

						sort = currentName;
						current.classList.add( "sort" , "up" );

					break;
				}

			break;

			case false:

				sort = sortBy;
				table.querySelector("[data-sort-id="+sortBy+"]").classList.add( "sort" , "up" );	

			break;


		}

		return sort;

	}

});
app.js
content_copyfile_download
"use strict";

var sortApp = angular.module("sortApp" , []);

sortApp.controller( "appController" ,  [ '$scope' , 'orderHandler' , function( $scope , orderHandler ) {

	$scope.people = [
		  {
		    "name" : "Jan",
		    "age" : 25,
		    "city" : "Warsaw"
		  },
		  {
		    "name" : "Anna",
		    "age" : 30,
		    "city" : "Oslo"
		  },
		  {
		    "name" : "Teodor",
		    "age" : 27,
		    "city" : "Berlin"
		  },
		  {
		    "name" : "Marcin",
		    "age" : 40,
		    "city" : "New York"
		  },
		  {
		    "name" : "Baltazar",
		    "age" : 32,
		    "city" : "Buenos Aires"
		  }
	];

	$scope.order = "name";

	$scope.orderBy = function( type ) {

		$scope.order = orderHandler.sort( "people" , type );

		return;

	};

}]);
app.html
content_copyfile_download
<!doctype html>
<html ng-app="sortApp">
<head>
<meta charset="utf-8">
<title></title>

<meta name='description' parent='' />
<meta name='keywords' parent='' />

  <style type="text/css">

  	th { text-align: left; }
  	
  	/* Sorting styles */

  	.order { cursor: pointer; }
  	.sort { text-decoration: underline; }
  	.up:after { content: " ▲"; }
  	.down:after { content: " ▼"; }

  </style>
  
</head>

<body ng-controller="appController">

<table border='1' data-table-id='people'>

	<thead>
		<tr>
			<th> <span data-sort-id='name' class='order sort up' ng-click="orderBy('name');"> Name </span> </th>
			<th> <span data-sort-id='age' class='order' ng-click="orderBy('age');">Age</span> </th>
			<th> <span data-sort-id='city' class='order' ng-click="orderBy('city');">City</span> </th>
		</tr>
	</thead>

	<tbody>

		<tr ng-repeat="person in people | orderBy: order">	
			<td>{{person.name}}</td>			
			<td>{{person.age}}</td>	
			<td>{{person.city}}</td>
		</tr>

	</tbody>

</table>

<script src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="sortingService.js"></script>

</body>

</html>