- Il faut déclarer ton module angular
- Les clés "username" et "content" n'existent pas dans le tableau comments.
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
Dans ton code HTML, il te faut d'abord déclarer une nouvelle application :
Ensuite, pour que ton code HTML fonctionne :
Il te faut utiliser un code Javascript similaire à celui ci :
@Kal-El, tu as utilisé un ControllerAs, donc tu ne devrais pas avoir besoin de la variable $scope normalement. Me trompe-je ?
@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 :)
J'ai le même probleme voici mon code :
Et voila ce que j'obtient :
Est ce que ça ne vient pas de là tout simplement ?
non cela ne marche pas. jaimerais bien quelquun me passe son code qui marche
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 :
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
merci beaucoup je test le code aujourd´hui et je vous tient au courant
Super cela marche correctement ! je vous remercie ! c'était juste une erreur de query comme la dit "kal-el".
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>