Heim > Artikel > WeChat-Applet > Der AngularJS-Filter vervollständigt die Sortierfunktion. Beispiel für detaillierte Erklärung

Der AngularJS-Filter vervollständigt die Sortierfunktion. Beispiel für detaillierte Erklärung

小云云Original: 2018-02-07 14:01:311639Durchsuche

Dieser Artikel stellt hauptsächlich die Sortierfunktion von AngularJS im Detail vor. Ich hoffe, dass er für alle hilfreich ist.

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

Verwandte Empfehlungen:

Detaillierte Erläuterung der Angularjs-Filter zur Implementierung dynamischer Such- und Sortierfunktionen

Beispielanalyse zur Verwendung des AngularJS-Filters

Detaillierte Erläuterung der Verwendung des AngularJS-Filters_AngularJS

Das obige ist der detaillierte Inhalt vonDer AngularJS-Filter vervollständigt die Sortierfunktion. Beispiel für detaillierte Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Datenbindung und Berechnung des WeChat-AppletsNächster Artikel：Detaillierte Erläuterung der Datenbindung und Berechnung des WeChat-Applets

In Verbindung stehende Artikel

Mehr sehen