JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

<h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" />
<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', []).
filter('bygenre', function () {
    return function (movies, 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']);