html Angular 1.4.x中的通用列表排序/关键字：订单列表选择器服务排序

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Angular 1.4.x中的通用列表排序/关键字：订单列表选择器服务排序相关的知识，希望对你有一定的参考价值。

"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;

	}

});

"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;

	};

}]);

<!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>

以上是关于html Angular 1.4.x中的通用列表排序/关键字：订单列表选择器服务排序的主要内容，如果未能解决你的问题，请参考以下文章

html Angular 1.4.x中的通用列表排序/关键字：订单列表选择器服务排序

angular 1.x 是不是具有通用特征或模式？

Angular - 在 OnInit 上进行不同 API 调用的通用组件