AngularJS: implementare un sistema di ricerca on page

Con AngularJS è semplice implementare un sistema di ricerca nella stessa pagina.

La soluzione è la seguente:

angular.module('MyApp').controller('MyCtrl', [ '$rootScope', '$scope', '$http',
    function($rootScope, $scope, $http) {

    $scope.items = [];
    $scope.searchTerm = ''; // Con la direttiva ng-model

    $scope.getItems = function() {
        $http.get('/api/items').then(function(response) {
            $scope.items = response.data;
        });
    };

    $scope.searchItems = function() {
        var filtered = [];
        var q = $scope.searchTerm.toLowerCase();
        $scope.items.forEach(function(item) {
            var name = item.name.toLowerCase();
            if(name.indexOf(q) != -1) {
                filtered.push(item);
            }

        });
        if(filtered.length > 0) {
            $scope.items = filtered;
        }

    };

    $scope.getItems();

}]);