Bonjour à tous,

J'utilise sérieusement AngularJS pour la première dans la conception d'une application et j'ai quelques soucis dans la façon de faire.
J'ai une page avec 4 champs <select>, un pour choisir une catégorie, un autre pour une sous-catégorie etc...

En dessous j'ai une liste de produits qui est retournée.

Mon but est d'arriver à affiner la liste de produits en fonction de choix fait juste au dessus avec les <select>.

Par exemple j'affiche tous mes produits en arrivant sur la page. Ensuite je vais sélectionner "catégorie 1" du coup ça met à jour tous les produits qui appartiennent à la catégorie 1, ensuite je sélectionne la "sous-catégorie 2" et du coup ça met à jours tous les produits qui appartiennent à la catégorie 1 ET à la sous-catégorie 2.

Jusqu'à présent j'ai réussi à faire en sorte de retourner les produits appartenant à une catégorie, ceux appartenant à une sous-catégorie mais pas les 2 à la fois.

Voici un extrait de mon HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<div class="col-sm-3">
    <label>Catégorie</label>
    <select class="form-control" ng-model="categorieSelect" ng-init="categorieSelect = 0" ng-options="category as category.categorie for category in categories track by category.id" ng-change="changeCategorie">
        <option value="">Toutes les catégories</option>
    </select>
</div>
 
 
<div class="col-sm-3">
    <label>Sous-Catégorie</label>
    <select class="form-control" ng-model="sousCategorieSelect" ng-init=" sousCategorieSelect = 0" ng-options="sous_category as sous_category.sous_categorie for sous_category in sous_categories track by sous_category.id">
        <option value="">Toutes les sous-catégories</option>
    </select>
</div>
 
<div class="row products">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Produit</th>
                <th>Prix</th>
                <th>Stock</th>
                <th>Description</th>
                <th class="text-center">Image</th>
            </tr>
        </thead>
 
        <tbody>
            <tr ng-repeat="product in products | filter:categorieSelectChange | filter:sousCategorieSelectChange">
                <td>{{ product.id }}</td>
                <td>{{ product.produit }}</td>
                <td>{{ product.prix | currency : "€" : 2 }}</td>
                <td>{{ product.stock }}</td>
                <td>{{ product.description }}</td>
                <td class="text-center"><img class="img-thumbnail img-responsive" width="100" src="<?= site_url(); ?>web/img/{{ product.image }}" /></td>
            </tr>
        </tbody>
    </table>
</div>

Et voici mon JS :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
ApiApp.controller('SearchController', function ($scope, $http) {
    $http({
        url: 'get_cat',
        method: 'POST',
    }).success(function(data) {
        $scope.categories = data;
    }).error(function(data){
        $scope.categories = data;
    });
 
 
    $http({
        url: 'get_sous_cat',
        method: 'POST',
    }).success(function(data) {
        $scope.sous_categories = data;
    }).error(function(data){
        $scope.sous_categories = data;
    });
 
 
    $scope.categorieSelectChange = function(product) {
        if(angular.isObject($scope.categorieSelect))
        {
            if($scope.categorieSelect.id != 0) {
                return (product.categorie == $scope.categorieSelect.id);
            }
        }
    }
 
    $scope.sousCategorieSelectChange = function(product) {
        if(angular.isObject($scope.sousCategorieSelect))
        {
            if($scope.categorieSelect.id != 0) {
                return (product.sous_categorie == $scope.sousCategorieSelect.id); 
            }
        }
    }
})
Si quelqu'un a une idée ou une piste je suis preneur, merci d'avance