Le filtre Angularjs complète l'exemple de fonction de tri, explication détaillée-Développement de mini-programmes-php.cn

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

小云云

Libérer： 2018-02-07 14:01:31

original

1688 Les gens l'ont consulté

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>

Copier après la connexion

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!