Forum : Problème de controller sur AngularJS

Il faut déclarer ton module angular
Les clés "username" et "content" n'existent pas dans le tableau comments.

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

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

kal-el

@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

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

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

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

kal-el

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

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

MaxSliw

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

kholladi

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>

Problème de controller sur AngularJS

11 réponses