JSFiddle - React, Tailwind, and code Playground

by samibel

HTML

<div ng-app="app">
<div  ng-controller="mainController">
    <ul ng-repeat="movie in movies |searchFilter:Filter.genre  | searchFilter:Filter.name  ">
        <li>{{movie.name}}</li>
    </ul>
    <h2>genre</h2>
    <label>Comedy</label><input  type="checkbox" ng-model="Filter.genre.Comedy" ng-true-value="Comedy"  data-ng-false-value=''/><br/>
     <label>Action</label><input  type="checkbox" ng-model="Filter.genre.Action" ng-true-value="Action"  data-ng-false-value=''/><br/>
     <label>Drama</label><input  type="checkbox" ng-model="Filter.genre.Drama" ng-true-value="Drama"  data-ng-false-value=''/>
         <h2>Name</h2>
      <label>Shrek</label><input  type="checkbox" ng-model="Filter.name.Shrek" ng-true-value="Shrek"  data-ng-false-value=''/><br/>
</div>
</div>

JavaScript

var app =angular.module('app', []);

app.controller('mainController', function($scope) {
    $scope.movies = [{name:'Shrek', genre:'Comedy'},
                     {name:'Die Hard', genre:'Action'},
                     {name:'The Godfather', genre:'Drama'}];
});


app.filter('searchFilter',function($filter) {
        return function(items,searchfilter) {
             var isSearchFilterEmpty = true;
            //searchfilter darf nicht leer sein 
              angular.forEach(searchfilter, function(searchstring) {   
                  if(searchstring !=null && searchstring !=""){
                      isSearchFilterEmpty= false;
                  }
              });
            
        if(!isSearchFilterEmpty){
                var result = [];  
              
                angular.forEach(items, function(item) {  
                    var isFound = false;
                     angular.forEach(item, function(term,key) {                         
                         if(term != null &&  !isFound){
                             term = term.toLowerCase();
                                angular.forEach(searchfilter, function(searchstring) {      
                                    searchstring = searchstring.toLowerCase();
                                    if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
                                       result.push(item);
                                        isFound = true;
                                        // console.log(key,term);
                                    }
                                });
                         }
                            });
                       });
            return result;
        }else{
        return items;
        }
    }
  });