Angular - test moteur recherche

by yinyann

HTML

<div ng-app="myGamesApp">
<div ng-controller="FiltersCtrl" class="searchBar">
    <div>
        <label class="criteria">Mécanique centrale :</label>
        <select ng-model="filterService.activeFilters.mecaniques">
            <option ng-repeat="mecaniques in ['DeckBuilding','Pose d ouvriers', 'Cartes', 'Draft', 'Programmation', 'Pick and Delivery', 'Vacheries', 'Bourrin', 'Stop ou encore', 'Combos', 'Party Game', 'Dés', 'Assymétrique', 'Collaboratif', 'LandCrawling', 'Objectifs', 'Awale', 'Majorité']">{{mecaniques}}</option>
            </select>
    </div>
    <div>
        <label class="criteria">Difficulté :</label>
        <select ng-model="filterService.activeFilters.difficulte">
            <option ng-repeat="difficulte in ['facile','moyen', 'difficile']">{{difficulte}}</option>
        </select>
    </div>
    <div>
        <label class="criteria">Joueurs :</label>
        <label ng-repeat="nbjoueurs in [1, 2, 3, 4, 5, 6, 7, 8, '']">
            <input
            type="radio"
            name="nbjoueurs[]"
            ng-click="toggleSelection(nbjoueurs)"
            > {{nbjoueurs}}
        </label>
        </div>
        <div>
            <label class="criteria">Accessible pour personne de :</label>
            <input ng-model="filterService.minAge" /> ans
        </div>
</div>
<div ng-controller="GameListCtrl" class="searchResults">
    <p><input ng-model="filterService.activeFilters.name" /></p>
    <div class="gameItem" ng-repeat="game in games | filter: filterService.activeFilters | filter: ageFilter | orderBy: 'name' ">
        <label class="gameJoueurs">De {{joueursMin(game)}} à {{joueursMax(game)}} joueurs</label>
        <label class="gameName">{{game.name}}</label>
        <label class="gameAge">> {{game.age}} ans</label>
        <p>{{displayMecaniques(game)}}</p>
        <img ng-src="http://img3.trictrac.net/generate/default_250_250/{{game.imgTT}}"/>
    </div>
</div>
</div>

CSS

.searchBar { width: 30%; float: left; }
.searchResults { float: left; width: 70%; }
.criteria { color : grey; display: block; margin-top: 10px; }
.gameItem { border: 2px grey solid; margin: 2px; padding: 4px;position: relative; }
.gameName {color: grey;}
.gameAge {color: grey; position: absolute; top: 2px; right: 1em; }
.gameJoueurs {color: grey; position: absolute; bottom: 2px; right: 1em; }

JavaScript

angular.module('myGamesApp.services', []).factory('filterService', function(){
    return {
        activeFilters: { },
        minAge: 100,
        searchText: ''
    };
});
var myGamesApp = angular.module('myGamesApp', ['myGamesApp.services']);
myGamesApp.controller('FiltersCtrl', function ($scope, filterService){
    $scope.filterService = filterService;
    
    $scope.toggleSelection = function toggleSelection(nbJoueurs) {
    var idx = $scope.filterService.activeFilters.joueurs = nbJoueurs;
  };

});
myGamesApp.controller('GameListCtrl', function ($scope, filterService) {
    $scope.filterService = filterService;
    $scope.displayMecaniques = function(game){
        if(game.mecaniques)
        {
            return game.mecaniques.join(", ");
        }
        return "inconnues";
    };
    $scope.joueursMin = function(game){
        return game.joueurs[0];
    };
    $scope.joueursMax = function(game){
        return game.joueurs[game.joueurs.length - 1];
    };
    $scope.ageFilter = function(game){
        return game.age <= $scope.filterService.minAge;
    };
    $scope.games = [
    {
        'name': 'Ascension',
        'imgTT': '1355948430.50d2218ece2f8.jpg',
        'mecaniques': ["DeckBuilding", "Combos", "Cartes"],
        'joueurs' : [1,2,3,4,5,6],
        'difficulte' : 'facile',
        'age' : 12
    },
    {
        'name': 'Tzolkin',
        'imgTT': '1367661056.R3oFcf.jpeg',
        'mecaniques': ["Pose d ouvriers"],
        'joueurs': [2,3,4],
        'difficulte' : 'difficile',
        'age' : 14
    },
    {
        'name': 'Gozu',
        'mecaniques': ["Combos", "Cartes"],
        'joueurs': [2,3,4],
        'difficulte' : 'moyen',
        'age' : 12
    },
    {
        'name': 'Camelot',
        'mecaniques': ["Vacheries", "Party Game", "Cartes"],
        'joueurs': [2,3,4,5],
        'difficulte' : 'facile',
        'age' : 10
    },
    {
        'name': 'Smash Up',
        'mecaniques': ["Vacheries", "Combos", "Cartes"],
       ...