JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div ng-app="myApp" ng-controller="myCtrl as my">
  
   Filtrer par :
   <div ng-repeat="genre in my.genres">
     <input type="checkbox" ng-click="my.toggleGenre(genre)"> {{genre}}
   </div>
   
   <hr><hr>
  
   <div ng-repeat="film in my.films | filter : { genre: my.selectedGenre } : my.compateur">
     {{film.title}} ({{film.genre}})
     <hr>
   </div>
  
</div>

JavaScript

angular.module('myApp', []).controller('myCtrl', function() {
	
  // https://docs.angularjs.org/api/ng/filter/filter
  this.compateur = function(actual, expected) {
  	if (expected.length === 0) return true;
    
  	return expected.indexOf(actual) > -1;
  };
  
  this.toggleGenre = function(genre) {
  	var pos = this.selectedGenre.indexOf(genre);
    if (pos === -1) {
    	this.selectedGenre.push(genre)
    } else {
    	this.selectedGenre.splice(pos, 1);
    }
  };
  
  this.selectedGenre = [];
  
  this.genres = ['Action', 'Horreur', 'Comédie'];
  
	this.films = [{
        title: 'Psychose',
        genre: 'Horreur'
      },
      {
        title: 'Alien, le 8éme passager',
        genre: 'Horreur'
      },
      {
        title: 'Le silence des agneaux',
        genre: 'Horreur'
      },
      {
        title: 'Batman The Dark Knight',
        genre: 'Action'
      },
      {
        title: 'Le Dictateur',
        genre: 'Comédie'
      },
      {
        title: 'Warrior',
        genre: 'Action'
      },
      {
        title: 'Matrix',
        genre: 'Action'
      },
      {
        title: 'La vie est belle',
        genre: 'Comédie'
      },
      {
        title: 'Intouchables',
        genre: 'Comédie'
      }
    ];
  
});