Skip to content

Instantly share code, notes, and snippets.

@patotoma

patotoma/InstantSearch.md

Created February 22, 2014 13:15
Show Gist options
  • Save patotoma/9154681 to your computer and use it in GitHub Desktop.
Save patotoma/9154681 to your computer and use it in GitHub Desktop.
Download ZIP
Instant Search and Order with AngularJS
Raw
instantSearch.html
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="Controller">
City: <input type="text" ng-model="name">
<br>
Order by:
<a href="" ng-click="predicate = 'name'">name</a>
<a href="" ng-click="predicate = 'polulation'">population</a>
<ul>
<li ng-repeat="city in cities | filter: name | orderBy: predicate">
{{ city.name }} | {{ city.population }}
</li>
</ul>
</div>
<script>
function Controller($scope){
$scope.cities = [
{name: "Shanghai", population: "16 060 307"},
{name: "Lagos", population: "13 969 284"},
{name: "Karachi", population: "13 907 015"},
{name: "Istanbul", population: "12 478 447"},
{name: "Mumbai", population: "12 111 194"},
{name: "Moscow", population: "11 821 873"},
{name: "São Paulo", population: "11 716 620"},
{name: "Beijing", population: "11 070 654"},
{name: "Guangzhou", population: "11 007 835"},
{name: "Delhi", population: "10 520 000"},
{name: "Lahore", population: "10 467 400"},
{name: "Shenzhen", population: "10 442 426"},
{name: "Seoul", population: "9 761 407"},
{name: "Jakarta", population: "9 341 844"},
{name: "Tianjin", population: "8 981 087"},
{name: "Chennai", population: "8 967 665"},
{name: "Tokyo", population: "8 922 949"},
{name: "Cairo", population: "8 906 039"},
{name: "Dhaka", population: "8 873 017"},
{name: "Mexico City", population: "8 859 036"},
{name: "Lima", population: "8 754 000"},
{name: "Kinshasa", population: "8 425 970"},
{name: "Bangalore", population: "8 336 697"},
{name: "New York", population: "8 308 369"},
{name: "London", population: "8 280 925"},
{name: "Bangkok", population: "8 244 535"},
{name: "Tehran", population: "8 220 237"},
{name: "Dongguan", population: "7 776 845"},
{name: "Bogotá", population: "7 681 700"},
{name: "Ho Chi Minh City", population: "7 310 691"},
{name: "Faisalabad", population: "7 108 100"},
{name: "Hong Kong", population: "6 844 100"},
{name: "Hanoi", population: "6 809 970"},
{name: "Hyderabad", population: "6 434 373"},
{name: "Wuhan", population: "6 429 923"},
{name: "Rio de Janeiro", population: "6 151 622"},
{name: "Foshan", population: "6 150 000"},
{name: "Baghdad", population: "5 570 585"},
{name: "Ahmedabad", population: "5 399 200"},
{name: "Singapore", population: "5 391 028"},
{name: "Shantou", population: "5 188 286"},
{name: "Riyadh", population: "5 131 967"},
{name: "Saint Petersburg", population: "5 112 018"}
];
$scope.predicate = 'population';
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</body>
</html>
Raw
InstantSearch.md

Instant Search and Order with AngularJS

How to use:

  • Download instantSearch.html or just copy the code.
  • Add the file to your webpage directory.
  • Edit to suit your needs.

Working fiddle

If you have any questions or innovations please leave me a comment.

patriktoma.studenthosting.sk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment