Discussion :

[apprenti69]

Bonjour je suis entrain de d'apprendre AngularJS , dans ce cadre je suis entrain de développer un petit site e_commerce .
je veux ajouter des articles affichés dans un panier définit dans le controller , mais la fonction d'ajout article reste invisible donc impossible d'ajouter l'article.

controller :

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
 
<table CLASS="table-bordered">
    <tr class="show-for-medium">
    <th>Produits</th>
    <th>prix</th>
    <th>stock</th>
    <th>quantité à vendre</th>k
 
</tr>
 
    <tr class="active" ng-repeat="produit in produits">
        <td >{{produit.nom_produit}}</td>
            <td>{{produit.prix}}</td>
            <td>{{produit.stock}}</td>
            <td> <form name="myForm" >
                <input type= "hidden" ng-model="id_produit" value="{{produit.id_produit}}" >
                <input type="hidden"  name="prix" ng-model="prix" value="{{ produit.prix}}" >
                <input size="5" type="number" placeholder="quantite" ng-model="quantite" ng-required="true" title="quantité à vendre" ng-value="1" min="1" MAXLENGTH="4">
            </td><td>
            <button type="submit"   STYLE="margin-left: 5em" onclick="alert('ajout')" onfocus="alert('ajout')"  type="button" ng-click='ajouterArticle("{{produit}}")' class="btn btn-lg btn-success" >Ajouter</button>
        </td>
    </tr>
            </form>
 
 
            </td>
        </table>

code source obtenu

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<tr class="active ng-scope" ng-repeat="produit in produits">
        <td class="ng-binding"> Sardine ABDA</td>
            <td class="ng-binding">0</td>
            <td class="ng-binding">32000</td>
            <td> <form name="myForm" class="ng-pristine ng-valid-min ng-invalid ng-invalid-required ng-valid-maxlength">
                <input class="ng-pristine ng-untouched ng-valid" type="hidden" value="PDEJ_1" ng-model="id_produit">
                <input name="prix" class="ng-pristine ng-untouched ng-valid" type="hidden" value="0" ng-model="prix">
                <input title="quantit� � vendre" class="ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required ng-valid-maxlength" required="required" type="number" size="5" maxlength="4" min="1" placeholder="quantite" value="1" ng-model="quantite" ng-value="1" ng-required="true">
            </form></td><td>
            <button class="btn btn-lg btn-success" style="margin-left: 5em" onclick="alert('ajout')" onfocus="alert('ajout')" type="submit" ng-click='ajouterArticle("{"id_produit":"PDEJ_1","nom_categ":"Petit_dej","id_categ":"1","nom_produit":" Sardine ABDA","prix":"0","stock":"32000"}")'>Ajouter</button>
        </td>
    </tr>

voici le code javascript du controller

Code javascript :

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
 
angular.module('workspaceAngularApp')
    .controller('MainCtrl', function ($scope  ,$http) {
 
        $http({
            method: 'GET',
            url: 'http://localhost/api/getProduits',
 
        }).success(function (response, status) {
 
            $scope.produits=response.produits;
            console.log("Getproduits");
 
        }).error(function (response) {
            console.log("erreur: Produit");
 
        });
 
        $scope.panier = {
            "nom": '', "prenom": '', "tel": '',
            "articles": []
 
        };
        $scope.aAjouterArticle = function (objet) {
            console.log("ajouta");
           $scope.panier.articles.push(objet);
        }
 
    });

je vous remercie par avance de votre aide.
cordialement

[slim]

Bonjour,

Il y a un "a" en trop dans ng-click ("ng-aclick").

[apprenti69]

J'ai enlevé le "a" mais il se trouve quand je mets console.log(panier), il m'affiche :

ReferenceError: panier is not defined

[slim]

essaie console.log($scope.panier);

[apprenti69]

j'ai ça

ReferenceError: $scope is not defined

[slim]

ah! tu fais le console.log dans la console du navigateur... je pensais que c'était dans le contrôleur.

Le contrôleur, justement, n'est pas déclaré... si tu utilise un router, déclare le dedans. Sinon -> ng-controller dans ton template.