- Download
instantSearch.htmlor just copy the code. - Add the file to your webpage directory.
- Edit to suit your needs.
If you have any questions or innovations please leave me a comment.
Created
February 22, 2014 13:15
-
-
Save patotoma/9154681 to your computer and use it in GitHub Desktop.
Instant Search and Order with AngularJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment