Discussion :

[Rhumario]

Bonjour,

J'essaye de mettre en place le Framework Angular JS sur mon projet, mais ce n'est pas évident quand on est 0 en JS.

le but étant d'afficher un tableau d'objet, par exemple des personnes avec comme attribut nom, age, etc...
Au dessus de mon tableau, j'ai une barre de recherche comportant toutes les lettres de l'alphabet. J'aimerai lorsque je clique sur une lettre, afficher uniquement les personnes dont le nom commence par cette lettre.

exemple .html

Code html :

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

1
2
3
4
5
<tr>
	<td> <button type="button" class="btn btn-info" ng-click="filtreByLetter('A')">A</button></td>
	<td> <button type="button" class="btn btn-info" ng-click="filtreByLetter('B')">B</button></td>
	<td> <button type="button" class="btn btn-info" ng-click="filtreByLetter('C')">C</button></td>
</tr>

Comment puis-je filtrer mes données sur la 1ere lettre uniquement???


J'arrive enfin a effectuer un filtre sur le nom de mes personnes. Mais je filtre sur le nom complet et non sur la 1ere lettre.
Lorsque je clique sur le boutton 'A', je récupere tout les noms qui contiennent la lettre 'A'.

fonction en JS.

Code :

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

1
2
3
4
    $scope.filtreByLetter = function(letter){
    	$scope.personnes =  $scope.personnesCopy;
    	$scope.personnes =  $filter('filter')($scope.personnes, letter);
    };

[SpaceFrog]

en js pur j'avais proposé ce code
http://www.developpez.net/forums/d10...eurs-colonnes/

[Marco46]

Dans ton exemple on ne sait pas comment est construit ton tableau, normalement ça devrait être avec un ng-repeat.

Pour la mise en place de filtres simple tu as cet exemple.

Sinon pour créer soi-même ses propres filtres tu as un exemple dans le tutorial d'angular.

[Rhumario]

Merci pour les réponses, mon problème est résolu, il est très difficile d'utiliser AngularJS lorqu'on a jamais fait de JavaScript.
Par contre,je pense qu'il est sage de ne pas utiliser de JQuery avec AngularJS.

Pour les curieux, voici ce que j'ai fait.

layout.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table id="recherche">
<tr>
	<td> <button type="button"  ng-click="filterByLetter('A')">A</button></td>
	<td> <button type="button"  ng-click="filterByLetter('B')">B</button></td>
</tr>
</table> 
...
<table>
   <th></th>
   ...
  <tr ng-repeat="personne in personnes| orderBy:predicate:reverse | filter:byFirstLetter">
            <td>{{personne.name}}</td>
            <td>{{personne.id}}</td>
  </tr>
</table>

script.js

Code :

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

1
2
3
4
5
6
7
8
 
          $scope.filterByLetter = function(letter){
	    	$scope.currentLetter = letter;
	    };
 
	  $scope.byFirstLetter = function(personne){
	    return personne.name[0].toUpperCase() === $scope.currentLetter;	
	  };

Donc si j'ai bien compris, pour résumer, lorsque je clique sur un boutton (exemple: A), j'appel la fonction JS "filterByLetter", celle-ci modifie $scope.currentLetter. qui lui est appeler dans le filtre"byFirstLetter". Comme ce filtre définit mon tableau, AngularJS le met a jour automatiquement.

[Marco46]

il est très difficile d'utiliser AngularJS lorqu'on a jamais fait de JavaScript.

Oui il est conseillé de revoir les bases du js avant de se taper Angular.

Par contre,je pense qu'il est sage de ne pas utiliser de JQuery avec AngularJS.

Oui surtout au début. Après on peut en avoir besoin des choses spécifiques, et surtout on sait quand et comment l'utiliser.

Donc si j'ai bien compris, pour résumer, lorsque je clique sur un boutton (exemple: A), j'appel la fonction JS "filterByLetter", celle-ci modifie $scope.currentLetter. qui lui est appeler dans le filtre"byFirstLetter". Comme ce filtre définit mon tableau, AngularJS le met a jour automatiquement.

Oui c'est l'idée. Toute modification du scope entraîne une mise à jour de la vue.