フィルターする

ソート(整列)、制限などを紹介します。

<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
 <script src="script.js"></script>

 <div ng-controller="searchCtrl">
  <ul>
   <li ng-repeat="item in items|orderBy:'-price'|limitTo:3">{{item.name}} {{item.price}}</li>
  </ul>
 </div>
</html>
				
var searchCtrl = function($scope) {
	$scope.items = [
	               {"name":"book","price":2520},
	               {"name":"kettle","price":1980},
	               {"name":"pc","price":69800},
	               {"name":"cosme","price":1540},
	               {"name":"software","price":27400},
	               {"name":"candy","price":10.5},
	               {"name":"ice","price":128},
	               {"name":"chiken","price":4580},
	               {"name":"cake","price":2580},
	               {"name":"drink","price":130},
	               {"name":"cd","price":1000}
	];
}
				

フィルターのデモ

priceが高い上位3つを表示しています。

  • {{item.name}} {{item.price}}

解説

重要なポイント

  • orderBy:'-price'
  • limitTo:3

[orderBy:'-price']で[price]を降順でソートしています。

[orderBy:'price']にすると昇順になります。

[limitTo:3]上位3まで表示されます。