<!-- Plik: r08/filter-arrays.html -->
<html>
<head>
  <meta charset="utf-8">
  <title>Filtry w akcji</title>
</head>
<body ng-app="filtersApp">

<div ng-controller="FilterCtrl as ctrl">

  <button ng-click="ctrl.currentFilter = 'string'">
    Filtr z opcją string
  </button>
  <button ng-click="ctrl.currentFilter = 'object'">
    Filtr z opcją object
  </button>
  <button ng-click="ctrl.currentFilter = 'function'">
    Filtr z opcją function
  </button>
  Filtr tekstu
  <input type="text"
         ng-model="ctrl.filterOptions['string']">
  Pokaż tylko zrobione
  <input type="checkbox"
         ng-model="ctrl.filterOptions['object'].done">
  <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
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js">
</script>

<script type="text/javascript">
  angular.module('filtersApp', [])
    .controller('FilterCtrl', [function() {
      this.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: true},
        {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}
      ];
      this.sortOrder = ['+type', '-label'];

      this.filterOptions = {
        "string": '',
        "object": {done: false, label: 'C'},
        "function": function(note) {
          return note.type === 'task' && note.done === false;
        }
      };

      this.currentFilter = 'string';
    }]);
</script>
</body>
</html>
