Angular filter

Basic angular filter

by Rishi Kumar

HTML

<h1>Movies</h1>

<div ng-controller="sample">
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>

JavaScript

angular.module('myFilters', [])
.controller('sample',function($scope){
	$scope.movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];
})
.filter('bygenre', function () {
    return function (movies, genres) {
        console.log(movies)
        console.log(genres)
        var items = {
            genres: genres,
            out: []
        };
        angular.forEach(movies, function (value, key) {
            if (this.genres[value.genre] === true) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});

angular.bootstrap(document, ['myFilters']);