[Angular JS] Afficher tous les objets si filtre false

Bonjour à tous,

Bon je m’attaque à Angular JS pour un projet et j’avoue avoir besoin de beaucoup me documenter pour avancer. Et du coup je bloque sur un petit truc.

J’ai une page avec deux champs select qui me permettent de choisir une catégorie et une sous-catégorie et en fonction de ces choix j’affiche en dessous une liste de produits. Sauf qu’au lancement de la page aucun choix n’est défini et du coup aucun produit n’est proposé. Je préférerais au contraire avoir la liste de tous les produits et qu’après elle s’affine en fonction des choix.

Bref un petit exemple de mon code pour y voir plus clair. Ici ma page HTML j’ai deux select pour le choix des catégories et un champ input pour une recherche :

1
2
3
4
5
6
7
8
9

<select ng-model="categorieSelect" ng-options="category as category.categorie for category in categories track by category.id">
    <option>Select</option>
</select>

<select ng-model="sousCategorieSelect" ng-options="sous_category as sous_category.sous_categorie for sous_category in sous_categories track by sous_category.id">
    <option>Select</option>
</select>

<input type="text" placeholder="search" ng-model="search" />

Et voici mon code JS :

 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

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;
    });


    $http({
        url: 'get_products',
        method: 'POST',
    }).success(function(data) {
        $scope.products = data;
    }).error(function(data){
        $scope.products = data;
    });


    $scope.categorieSelectChange = function(product) {
        if(angular.isObject($scope.categorieSelect))
        {
            return (product.categorie == $scope.categorieSelect.id);  
        }  
    }


    $scope.sousCategorieSelectChange = function(product) {
        if(angular.isObject($scope.sousCategorieSelect))
        {
            return (product.sous_categorie == $scope.sousCategorieSelect.id); 
        }
    }
});

J’ai donc 3 requêtes AJAX pour charger mes catégories, sous catégories ainsi que mes produits. Et ensuite 2 fonctions pour filtrer mes produits selon leur catégorie et sous catégorie.

Si quelqu’un à une idée, je vous remercie d’avance

Salut

Je ne connais pas très bien Angular, mais j’ai l’impression qu’il nous manque un peu plus de contexte vraiment comprendre sur ce qui se passe, non ? Pourquoi ne rajoute tu pas une option dans ton select qui s’appelle ’Toutes les catégories’ et qui permet "d’annuler" une fois qu’on a sélectionné une categorie ? Du coup il suffirait de faire de ton option ’Toutes catégories’ le choix par défaut. Il faudrait modifier ta fonction categorieSelectChange pour vérfier si il s’agit du filtre ’Toutes catégories’ (tu retournes tous les produits) ou d’un autre (compotement actuel).

Je ne sais pas en revanche si c’est une bonne manière de faire avec AngularJs

Anto59290

Merci de ta réponse.

Effectivement ça me semble pas mal comme approche. Je vais essayer ça et je te tiens au courant