Блог

Я пытаюсь создать фильтр с другим флажком, флажок должен фильтроваться с помощью оператора ИЛИ, если в каком-либо из фильмов установлен какой-либо флажок. Элементы выглядели так:

 movies = [
          {title:'Man on the Moon', genre: [   
            {genreName: 'Family', genreId: '1'},  
            {genreName: 'Action', genreId: '2'}  
        ]},
          {title:'Meet the Robinsons', genre: [   
            {genreName: 'Family', genreId: '1'},  
            {genreName: 'Action', genreId: '2'}  
        ]},
          {title:'Sphere', [   
            {genreName: 'Family', genreId: '1'}    
        ]}
       ];
  

Я видел это обходное решение http://jsfiddle.net/GruffBunny/utKug/
И я пытаюсь работать отсюда, но я ничего не могу добиться.
Что у меня есть до сих пор в моем контроллере, так это:

 angular.module('MyModule', [])
    .controller( 'MyController', function($scope){
        $scope.showMovie = function(movie){
           angular.forEach(movie.genre, function(genreM){
           return genreM.genreName === $scope.Filter.Comedy || 
             genreM.genreName === $scope.Filter.Drama ||
             genreM.genreName === $scope.Filter.Action;
         }
        };

        $scope.movies = [
                  {title:'Man on the Moon', genre: [   
                    {genreName: 'Family', genreId: '1'},  
                    {genreName: 'Action', genreId: '2'}  
                ]},
                  {title:'Meet the Robinsons', genre: [   
                    {genreName: 'Family', genreId: '1'},  
                    {genreName: 'Action', genreId: '2'}  
                ]},
                  {title:'Sphere', [   
                    {genreName: 'Family', genreId: '1'}    
                ]}
               ];
    });
  

И вот HTML:

 <div ng-app='MyModule' ng-controller='MyController'>
    <h1>All movies - no filter</h1>
    <ul ng-repeat="movie in movies">
        <li>{{movie.name}}</li>
    </ul>

    <h1>Filtered movies</h1>
    <ul ng-repeat="movie in movies | filter:showMovie">
        <li>{{movie.name}}</li>
    </ul>

    <label>Comedy</label><input  type="checkbox" ng-model="Filter.Comedy" ng-true-value="Comedy"  data-ng-false-value=''/><br/>
    <label>Action</label><input  type="checkbox" ng-model="Filter.Action" ng-true-value="Action"  data-ng-false-value=''/><br/>
    <label>Drama</label><input  type="checkbox" ng-model="Filter.Drama" ng-true-value="Drama"  data-ng-false-value=''/>
</div>