Impostare un filtro con AngularJS

Abbiamo già parlato di AngularJS, nello specifico su come prendere i dati in formato JSON.

Partendo da quell'articolo vediamo come impostare una barra di ricerca per filtrare i risultati.

La parte di Javascript non cambia, in quanto il tutto è fatto da HTML, usando l'attributo ng-model e impostando il filter nell'attributo ng-repeat.

Quindi il JS è questo:

var app = angular.module('listBooksApp', []);

app.controller("BooksCtrl", function ($scope, $http) {
    $http.get('all_books.php').
            success(function (data, status, headers, config) {
                $scope.books = data;
            }).
            error(function (data, status, headers, config) {
                alert('Impossibile reperie la lista!');
            });
});

L'HTML invece:

                     Cerca: <input ng-model="searchText">
                    <br><br>
                    <table class="table table-bordered table-condensed table-striped">
                        <thead>
                            <tr>
                                <th>Titolo</th>
                                <th>Autore</th>
                                <th>Editore</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="book in books| filter:searchText">
                                <td>{{book.title}}</td>
                                <td>{{book.author}}</td>
                                <td>{{book.editor}}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-primary"
                                            ng-click="open(book)">Dettaglio</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

Vi posto solo la parte interessata.

Nell'attributo ng-model impostiamo "cosa ricercare".

Lo stesso nome che impostiamo nel filter più sotto (ng-repeat).

Enjoy!