Problème de controller sur AngularJS

Par Cedric Moudze, il y a 11 ans


Salut à tous. je débute dans la programmation sur AngularJS et je rencontre des difficulté notamment au niveau des controllers.
voici le code dont j'ai eu à realiser mais curieusement le scope ne renvoit aucune valeur. je voudrais donc savoir pourquoi
Mon pastebin:
http://pastebin.com/cBL3HJzQ

11 réponses

amethyste, il y a 11 ans
  1. Il faut déclarer ton module angular
  2. Les clés "username" et "content" n'existent pas dans le tableau comments.
kal-el, il y a 11 ans

Dans ton code HTML, il te faut d'abord déclarer une nouvelle application :

<!DOCTYPE html> <html lang="en" ng-app="MaSuperApp"> <head> ... </head> <body> </body> </html>

Ensuite, pour que ton code HTML fonctionne :

<div ng-controller="CommentsCtrl as comctrl"> <div ng-repeat="comment in comctrl.comments | filter: { content: query } | ory: order"> <p> <strong>{{ comment.username }}</strong><br> {{ comment.content }} </p> </div> </div>

Il te faut utiliser un code Javascript similaire à celui ci :

<script> angular.module('MaSuperApp', []) .controller('CommentsCtrl', CommentsCtrl); CommentsCtrl.$inject = ['$scope']; function CommentsCtrl($scope) { this.comments = [ { "_id": "54889680a6cc83c674b04295", ... } ]; } </script>
Maenhyr, il y a 11 ans

@Kal-El, tu as utilisé un ControllerAs, donc tu ne devrais pas avoir besoin de la variable $scope normalement. Me trompe-je ?

kal-el, il y a 11 ans

@prbaron, en effet mais j'ai laisser l'injection expres pour que Cedric Moudze vois comment ceci est réalisable avec ma façon d'écrire le code :)

MaxSliw, il y a 11 ans

J'ai le même probleme voici mon code :

<!DOCTYPE html> <html lang="fr" ng-app="MaSuperApp"> <head> <meta charset="UTF-8"> <title>Test AngularJS</title> </head> <body> <input type="text" ng-model="query" /> <h1>Recherche : {{query}}</h1> <select ng-model="order"> <option value="username">Organise par Nom</option> <option value="content">Organise par content</option> </select> <!--<div ng-controller="CommentsCtrl"> <div ng-repeat="comment in comments | filter:{content: query} | orderBy:order"> <p> <strong>{{comments.username}}</strong><br> {{comments.content}} </p>--> <div ng-controller="CommentsCtrl as comctrl"> <div ng-repeat="comment in comctrl.comments | filter: { content: query } | ory: order"> <p> <strong>{{ comment.username }}</strong><br> {{ comment.content }} </p> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> <script> angular.module('MaSuperApp', []) .controller('CommentsCtrl', CommentsCtrl); CommentsCtrl.$inject = ['$scope']; function CommentsCtrl($scope) { this.comments = [ { "_id": "54889680a6cc83c674b04295", "username" : "Anthony", "content" : "xd" } ]; } </script> </body> </html>

Et voila ce que j'obtient :

Maenhyr, il y a 11 ans

Est ce que ça ne vient pas de là tout simplement ?

<div ng-repeat="comment in comctrl.comments | filter: { content: query } | ory: order"> // devrait être <div ng-repeat="comment in comctrl.comments | filter: { content: query } | orderBy: order">
MaxSliw, il y a 11 ans

non cela ne marche pas. jaimerais bien quelquun me passe son code qui marche

kal-el, il y a 11 ans

Il y a quelques problème dans ton code actuel, ce qui l'empêche de fonctionner correctement. Si tu veux pouvoir filtrer par content, le scope de recherche query doit référencer l'attribut a rechercher dans ta collection :

<input type="text" ng-model="query.content"> <div ng-repeat="comment in comctrl.comments | filter: query | orderBy: order">

Ensuite, comme l'a souligner @prbaron, pour ordonnée tes données, tu dois utiliser orderBy et non ory qui n'existe pas.

J'ai créer un plunker fonctionnel pour que tu vois que ça marche : http://plnkr.co/edit/uGUsnmMhdBUC8gD6AEHX?p=preview

MaxSliw, il y a 11 ans

merci beaucoup je test le code aujourd´hui et je vous tient au courant

MaxSliw, il y a 11 ans

Super cela marche correctement ! je vous remercie ! c'était juste une erreur de query comme la dit "kal-el".

kholladi, il y a 11 ans

Le Problème était ici et non pas dans le query :
angular.module('MaSuperApp', []).controller('CommentsCtrl', CommentsCtrl);

  CommentsCtrl.$inject = ['$scope'];

  function CommentsCtrl($scope) {

<!doctype html>
<html>
<head>
<title>Dragoon chapitre 2</title>
</head>

<body ng-app="MaSuperApp">
        <h1> chapitre 2 Controller & Scope </h1>

    <div ng-controller="CommentsCtrl">

        <input type="text" ng-model="query"/>
    <select ng-model="order">
        <option value="firstname"> Organiser par Nom</option>
        <option value="content"> Organiser par Contenu</option>
    </select>
        {{query | uppercase}}
        <!--
    {{comments}}
    <br/>
    {{comments | filter:'z'}}-->

    <P><Strong> filtre UPPERCASE</Strong> </p>
    <ul>
        <li ng-repeat="comment in comments">{{comment.firstname }}
        </li>
    </ul>

    <p><Strong>fitre lettre 'z'</Strong></p>
    <ul>
        <li ng-repeat="comment in comments | filter:'z'">{{comment | uppercase}}
        </li>
    </ul>

    <p><Strong>fitre par zone de saisie</Strong></p>
    <ul>
        <li ng-repeat="comment in comments | filter:query">{{comment | uppercase}}
        </li>
    </ul>

    <p><Strong>filtre orderby:  +firstname ou -firstname</Strong></p>
    <ul>
        <li ng-repeat="comment in comments | filter:query | orderBy:'+firstname'">{{comment | uppercase}}
        </li>
    </ul>

<p><Strong>orderby dans select option</Strong></p>
    <ul>
        <li ng-repeat="comment in comments | filter:query | orderBy:order">{{comment | uppercase}}
        </li>
    </ul>

<p><Strong>filter par le choix du parametre 'content'</Strong></p>

        <div ng-repeat="comment in comments | filter:{content:query} | orderBy:order">
            <p><strong>{{comment.firstname}}</strong>, {{comment.content}}</p>          
        </div>

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<script>

  angular.module('MaSuperApp', []).controller('CommentsCtrl', CommentsCtrl);

  CommentsCtrl.$inject = ['$scope'];

  function CommentsCtrl($scope) {
        $scope.comments = 
    [
      {
        "firstname": "Alma",
        "city": "Cannondale",
        "email": "almapratt@fanfare.com",
        "content": "Velit ex cillum non cupidatat."
      },
      {
        "firstname": "Cara",
        "city": "Whipholt",
        "email": "carapratt@fanfare.com",
        "content": "Dolore eu amet laborum aute."
      },
      {
        "firstname": "Shepherd",
        "city": "Leroy",
        "email": "shepherdpratt@fanfare.com",
        "content": "Dolore sunt velit incididunt Lorem labore dolore esse occaecat anim eiusmod in mollit."
      },
      {
        "firstname": "Rich",
        "city": "Munjor",
        "email": "richpratt@fanfare.com",
        "content": "Exercitation dolor eiusmod anim dolore fugiat deserunt deserunt pariatur officia officia excepteur."
      },
      {
        "firstname": "Carissa",
        "city": "Lund",
        "email": "carissapratt@fanfare.com",
        "content": "Amet excepteur nulla excepteur cillum dolor Lorem."
      },
      {
        "firstname": "Amanda",
        "city": "Cucumber",
        "email": "amandapratt@fanfare.com",
        "content": "Est anim irure laboris incididunt sunt dolore commodo culpa ullamco incididunt."
      }
    ];
        // le transmettre a la vue  
    }   

</script>
</body>

</html>