angular filter with OR and no $scope

by manoj

HTML

<div ng-app='MyModule' ng-controller='MyController as vm1'>
     <h1>All movies - no filter</h1>

    <ul ng-repeat="movie in vm1.movies">
        <li>{{movie.name}}</li>
    </ul>
     <h1>Filtered movies</h1>

    <ul ng-repeat="movieq in vm1.movies | filter:vm1.showMovie">
        <li>{{movieq.name}}</li>
    </ul>
    <label>Comedy</label>
    <input type="checkbox" ng-model="vm1.Filter.Comedy" ng-true-value="Comedy" data-ng-false-value='' />
    <br/>
    <label>Action</label>
    <input type="checkbox" ng-model="vm1.Filter.Action" ng-true-value="Action" data-ng-false-value='' />
    <br/>
    <label>Drama</label>
    <input type="checkbox" ng-model="vm1.Filter.Drama" ng-true-value="Drama" data-ng-false-value='' />
</div>

JavaScript

angular.module('MyModule', [])

    .controller('MyController', function () {
    var vm = this;
    vm.showMovie = function (movie) {
        //alert(movie.genre);
        return movie.genre === vm.Filter.Comedy || movie.genre === vm.Filter.Drama ||
            movie.genre === vm.Filter.Action;
    };

    vm.movies = [{
        name: 'Shrek',
        genre: 'Comedy'
    }, {
        name: 'Die Hard',
        genre: 'Action'
    }, {
        name: 'The Godfather',
        genre: 'Drama'
    }];
});