recherche

Maison >Applet WeChat >Développement de mini-programmes >Le filtre Angularjs complète l'exemple de fonction de tri, explication détaillée

Le filtre Angularjs complète l'exemple de fonction de tri, explication détaillée

小云云
小云云original
2018-02-07 14:01:311739parcourir

Cet article présente principalement la fonction de tri d'Angularjs en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde. 


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

Recommandations associées :

Explication détaillée des filtres Angularjs pour implémenter des fonctions de recherche et de tri dynamiques

Analyse d'un exemple d'utilisation du filtre AngularJS

Explication détaillée de l'utilisation d'AngularJS filter_AngularJS


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la liaison de données et du calcul de l'applet WeChatArticle suivant：Explication détaillée de la liaison de données et du calcul de l'applet WeChat

Articles Liés

Voir plus