Home > Article > WeChat Applet > Angularjs filter completes sorting function example detailed explanation

Angularjs filter completes sorting function example detailed explanation

小云云Original: 2018-02-07 14:01:311637browse

This article mainly introduces the sorting function of Angularjs using filters in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<script type="text/javascript" src="js/angularjs.js" ></script> 
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /> 
<script> 
angular.module(&#39;myApp&#39;,[]) 
.service(&#39;data&#39;,function(){ 
return [ 
{id:1234,name:&#39;ipad&#39;,price:3400}, 
{id:1244,name:&#39;aphone&#39;,price:6400}, 
{id:1334,name:&#39;mypad&#39;,price:4400}, 
{id:8234,name:&#39;zpad&#39;,price:8400} 
]; 
}) 
.controller(&#39;myController&#39;,function($scope,data){ 
$scope.data=data; 
$scope.change=function(order){ 
//$scope.orderType=&#39;&#39;; 
$scope.order=order; 
if($scope.orderType==&#39;&#39;){ 
$scope.orderType=&#39;-&#39;; 
}else{ 
$scope.orderType=&#39;&#39;; 
} 
} 
}) 
</script> 
<style> 
.red{color: red;} 
</style> 
</head> 
<body ng-app="myApp"> 
<p ng-controller="myController" class="container"> 
<nav class="navbar navbar-default"> 
 <p class="container-fluid"> 
 <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <form class="navbar-form navbar-left"> 
  <p class="form-group"> 
   <input type="text" class="form-control" ng-model="search" placeholder="Search"> 
  </p> 
  </form> 
 </p><!-- /.navbar-collapse --> 
 </p><!-- /.container-fluid --> 
</nav> 
<table class="table table-bordered table-hover"> 
<thead> 
<tr> 
<th ng-click="change(&#39;id&#39;)" ng-class="{dropup:orderType==&#39;&#39;}">id<span ng-class="{red:order==&#39;id&#39;}" class="caret"></span></th> 
<th ng-click="change(&#39;name&#39;)" ng-class="{dropup:orderType==&#39;&#39;}">name<span ng-class="{red:order==&#39;name&#39;}" class="caret"></span></th> 
<th ng-click="change(&#39;price&#39;)" ng-class="{dropup:orderType==&#39;&#39;}">price<span ng-class="{red:order==&#39;price&#39;}" class="caret"></span></th> 
 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="x in data | filter:search | orderBy:orderType+order "> 
<td>{{x.id}}</td> 
<td>{{x.name}}</td> 
 
<td>{{x.price}}</td> 
 
</tr> 
</tbody> 
</table> 
</p> 
</body> 
</html>

Related recommendations:

Detailed explanation of Angularjs filters to implement dynamic search and sorting functions

AngularJS filter filter usage example analysis

Detailed explanation of the use of AngularJS filter_AngularJS

The above is the detailed content of Angularjs filter completes sorting function example detailed explanation. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of data binding and calculation of WeChat appletNext article：Detailed explanation of data binding and calculation of WeChat applet

See more

Angularjs filter completes sorting function example detailed explanation

Related articles