Discussion :

[DeRozan31]

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

[pterrat]

Bonjour

Imaginons que tu es 10000 produits. Que tu appelles tes 10000 produitset que tu fasses tes filters dessus, tu vas pourrir tes perfs au maximum.

Autant passer les informations de ta sous catégorie ou catégorie dans une méthode GET qui va te renvoyer ta liste de produits adapter à ce que tu vas afficher.

Le serveur back-end est beaucoup plus puissant que ton front-end pour trier les données.

Sinon tu as une options Front-end mais pas super performante :

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">
                <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>

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
41
42
43
44
45
46
47
48
49
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) && angular.isObject($scope.sousCategorieSelect))
        {
            if($scope.categorieSelect.id != 0 && $scope.sousCategorieSelect == 0) {
                return (product.categorie == $scope.categorieSelect.id);
            }
            else if($scope.categorieSelect.id == 0 && $scope.sousCategorieSelect != 0) {
                return (product.categorie == $scope.categorieSelect.id);
            }
            else if($scope.categorieSelect.id != 0 && $scope.sousCategorieSelect != 0) {
                return (product.categorie == $scope.categorieSelect.id || product.categorie == product.categorie == $scope.sousCategorieSelect.id);
            }
            else($scope.categorieSelect.id == 0 && $scope.sousCategorieSelect == 0) {
                return product;
            }
        }
}
    }
 
    $scope.sousCategorieSelectChange = function(product) {
        if(angular.isObject($scope.sousCategorieSelect))
        {
            if($scope.categorieSelect.id != 0) {
                return (product.sous_categorie == $scope.sousCategorieSelect.id); 
            }
        }
    }
})

[Invité]

Oui vaut mieux le faire dans le Back End.
J'ai ca sur mon blog, je dis pas que c'est génial, mais ça peut inspirer .

Le principe est que le watcher ANGULARJS surveille ce que tu choisis dans tes selects , et relance une requête $HTTP à chaque fois que tu choisis quelque chose, avec en paramêtre, $scope.filtres qui est un objet JSON contenant les critères que tu as choisi dans les filtres de ton app.

Le Back end php crée ensuite la requête SQL en additionnant des parties de requêtes additives ('AND bla bla = maVariableProvenantDuSelect") en fonction des variables provenant des selects du front end.

Avec cette méthode, il est possible d'additionner 10 filtres simultanément ou plus, et je trouve ça fiable.
A tester ici

Le secret, c'est WHERE 1=1 hi hi .... auquel tu colles autant de AND que tu veux ... L'astuce du WHERE 1=1 se retrouve dans pleins d'apps que ce soit du PHP, du VBA, du .net ...