| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Filters in Action</title> |
| <script src="../../tp/angular.js"></script> |
| </head> |
| <body ng-app="filtersApp"> |
| |
| <div ng-controller="FilterCtrl as ctrl"> |
| |
| <table> |
| <tr> |
| <td> |
| <button ng-click="ctrl.currentFilter = 'string'"> |
| Filter with string |
| </button> |
| </td> |
| <td> |
| Filter Text |
| <input type="text" |
| ng-model="ctrl.filterOptions['string']"/> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <button ng-click="ctrl.currentFilter = 'object'"> |
| Filter with object |
| </button> |
| </td> |
| <td> |
| Show Done or Not Done |
| <input type="checkbox" |
| ng-model="ctrl.filterOptions['object'].done"/> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <button ng-click="ctrl.currentFilter = 'function'"> |
| Filter with function |
| </button> |
| </td> |
| </tr> |
| </table> |
| <ul> |
| <li ng-repeat="note in ctrl.notes | |
| filter:ctrl.filterOptions[ctrl.currentFilter] | |
| orderBy:ctrl.sortOrder | |
| limitTo:5"> |
| {{note.label}} - {{note.type}} - {{note.done}} |
| </li> |
| </ul> |
| </div> |
| |
| |
| <script type="text/javascript"> |
| angular.module('filtersApp', []) |
| .controller('FilterCtrl', [function () { |
| var self = this; |
| |
| self.notes = [ |
| {label: 'FC Todo', type: 'chore', done: false}, |
| {label: 'FT Todo', type: 'task', done: false}, |
| {label: 'FF Todo', type: 'fun', done: true}, |
| {label: 'SC Todo', type: 'chore', done: false}, |
| {label: 'ST Todo', type: 'task', done: true}, |
| {label: 'SF Todo', type: 'fun', done: true}, |
| {label: 'TC Todo', type: 'chore', done: false}, |
| {label: 'TT Todo', type: 'task', done: false}, |
| {label: 'TF Todo', type: 'fun', done: false} |
| ]; |
| |
| self.sortOrder = ['+type', '-label']; |
| |
| self.filterOptions = { |
| 'string': '', |
| 'object': {done: false, label: 'F'}, |
| 'function': function (note) { |
| return note.type === 'task' && note.done === false; |
| } |
| }; |
| |
| self.currentFilter = 'string'; |
| }]); |
| </script> |
| </body> |
| </html> |