Ugarz/Filtre-Angularjs.markdown

## Filtre-Angularjs.markdown

      
    Raw
  

              Filtre-Angularjs.markdown
            
          
    Filtre Angularjs

Je joue avec le filtre Angularjs
A Pen by Ugo on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<!-- Appel du module "App" -->
<html ng-app="App">
<head>
<meta name="description" content="Filtrer avec Angularjs" />
  <!-- Appel de Bootstrap pour faire un truc joli -->
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <!-- Appel de la librairie AngularJs -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <h1>Filtrer avec AngularJs</h1>
  </div>
  <div class="jumbotron">
    <div class="container">
      <!-- Appel du controller de App -->
      <div ng-controller="FilterController as ctrl">
        <div>
          <h2>Toutes nos données :</h2>
          <span class="hilight" ng-repeat="entry in ctrl.array">{{entry.name}} |  </span>
        </div>
        <div>
          <h2>Les données qui contiennent un "a":</h2>
          <span class="hilight" ng-repeat="entry in ctrl.filteredArray">{{entry.name}} | </span>
        </div>
      </div>
    </div>
  </div>
  <h3 class="container">Commençons !</h3>
  <hr>
  <div class="container">
    <p>1) Dans un premier temps il faut définir l'utilisation de App</p>
    <pre>angular.module('App', []).</pre>
    <p>2) N'oubliez pas d'appeller votre application dans la balise &lt;html&gt;</p>
    <pre>&lt;html ng-app="App"&gt;</pre>
    <p>3) Ensuite il faut créer notre controller avec :</p>
    <pre>controller('FilterController', [filterFilter', function(filterFilter){}]);</pre>
        <p>4) N'oubliez pas d'appeller votre application dans la balise &lt;html&gt;</p>
    <pre>&lt;html ng-app="App"&gt;</pre>
    <p>5) Une fois cela fait on a plus qu'à remplir entre nos accolades notre controller d'un tableau fictif car trier du vide c'est difficile !</p>
    <pre>
  this.array = [
    {name: 'Tobias'},
    {name: 'Jeff'},
    {name: 'Brian'},
    {name: 'Igor'},
    {name: 'James'},
    {name: 'Brad'}
  ];</pre>
    <p>6) Pour opérer le filtre, rajoutez avant la fermeture du controller."a" étant le paramètre passé pour le filtre des données.</p>
    <pre>this.filteredArray = filterFilter(this.array, 'a');</pre>
    <p>7) Ensuite il nous faut afficher nos données. Pour cela dans votre code html, il faudra "appeler" les variables :</p>
    <pre>&lt;span class="hilight" ng-repeat="entry in ctrl.array">{{entry.name}} | &lt;span&gt;</pre>
    <p>Utilisez "ng-repeat" pour afficher toutes les données du tableau à la suite. Le span en question se répétera aussi longtemps qu'il y aura des données. J'ai délibérément rajouté une classe CSS pour donner un peu de couleur à notre liste.</p>
    <p>Le concept là est de passer entry in ctrl.array dans notre ng-repeat, c'est à dire de lui dire "Okay, on crée une variable qu'on appelle entry pour chaque entrée de notre tableau". Souvenez vous de notre :</p>
    <pre>ng-controller="FilterController as ctrl"</pre> en haut de notre html, il se comporte comme un alias : on appelle notre controller "ctrl" et faire un ctrl.array cible le tableau de note controller.
    <h2>Et voilà ! vous avez faire un filtre dynamique avec AngularJS</h2>
    <p class="bg-success">Je vous invite à vous référer à la documentation d'AngularJs <a href="https://docs.angularjs.org/guide">pour vous entrainer.</a></p>
  </div>
</body>
</html>

## script.js
//Notre App
angular.module('App', []).

//On crée le controller
controller('FilterController', ['filterFilter', function(filterFilter) {

  //Tableau de données, à remplacer pour les acces en base
  this.array = [
    {name: 'Anna'},
    {name: 'Inès'},
    {name: 'George'},
    {name: 'Germain'},
    {name: 'James'},
    {name: 'Bond'}
  ];

  //On ajoute un filtre au tableau, avec un paramètre "a"
  this.filteredArray = filterFilter(this.array, 'a');
}]);

## style.css
.hilight{
  background-color: yellow;
}
p{
  padding:10px;
}
	<!DOCTYPE html>
	<!-- Appel du module "App" -->
	<html ng-app="App">
	<head>
	<meta name="description" content="Filtrer avec Angularjs" />
	<!-- Appel de Bootstrap pour faire un truc joli -->
	<script src="//code.jquery.com/jquery.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	<!-- Appel de la librairie AngularJs -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="container">
	<h1>Filtrer avec AngularJs</h1>
	</div>
	<div class="jumbotron">
	<div class="container">
	<!-- Appel du controller de App -->
	<div ng-controller="FilterController as ctrl">
	<div>
	<h2>Toutes nos données :</h2>
	<span class="hilight" ng-repeat="entry in ctrl.array">{{entry.name}} \| </span>
	</div>
	<div>
	<h2>Les données qui contiennent un "a":</h2>
	<span class="hilight" ng-repeat="entry in ctrl.filteredArray">{{entry.name}} \| </span>
	</div>
	</div>
	</div>
	</div>
	<h3 class="container">Commençons !</h3>
	<hr>
	<div class="container">
	<p>1) Dans un premier temps il faut définir l'utilisation de App</p>
	<pre>angular.module('App', []).</pre>
	<p>2) N'oubliez pas d'appeller votre application dans la balise <html></p>
	<pre><html ng-app="App"></pre>
	<p>3) Ensuite il faut créer notre controller avec :</p>
	<pre>controller('FilterController', [filterFilter', function(filterFilter){}]);</pre>
	<p>4) N'oubliez pas d'appeller votre application dans la balise <html></p>
	<pre><html ng-app="App"></pre>
	<p>5) Une fois cela fait on a plus qu'à remplir entre nos accolades notre controller d'un tableau fictif car trier du vide c'est difficile !</p>
	<pre>
	this.array = [
	{name: 'Tobias'},
	{name: 'Jeff'},
	{name: 'Brian'},
	{name: 'Igor'},
	{name: 'James'},
	{name: 'Brad'}
	];</pre>
	<p>6) Pour opérer le filtre, rajoutez avant la fermeture du controller."a" étant le paramètre passé pour le filtre des données.</p>
	<pre>this.filteredArray = filterFilter(this.array, 'a');</pre>
	<p>7) Ensuite il nous faut afficher nos données. Pour cela dans votre code html, il faudra "appeler" les variables :</p>
	<pre><span class="hilight" ng-repeat="entry in ctrl.array">{{entry.name}} \| <span></pre>
	<p>Utilisez "ng-repeat" pour afficher toutes les données du tableau à la suite. Le span en question se répétera aussi longtemps qu'il y aura des données. J'ai délibérément rajouté une classe CSS pour donner un peu de couleur à notre liste.</p>
	<p>Le concept là est de passer entry in ctrl.array dans notre ng-repeat, c'est à dire de lui dire "Okay, on crée une variable qu'on appelle entry pour chaque entrée de notre tableau". Souvenez vous de notre :</p>
	<pre>ng-controller="FilterController as ctrl"</pre> en haut de notre html, il se comporte comme un alias : on appelle notre controller "ctrl" et faire un ctrl.array cible le tableau de note controller.
	<h2>Et voilà ! vous avez faire un filtre dynamique avec AngularJS</h2>
	<p class="bg-success">Je vous invite à vous référer à la documentation d'AngularJs <a href="https://docs.angularjs.org/guide">pour vous entrainer.</a></p>
	</div>
	</body>
	</html>
	//Notre App
	angular.module('App', []).

	//On crée le controller
	controller('FilterController', ['filterFilter', function(filterFilter) {

	//Tableau de données, à remplacer pour les acces en base
	this.array = [
	{name: 'Anna'},
	{name: 'Inès'},
	{name: 'George'},
	{name: 'Germain'},
	{name: 'James'},
	{name: 'Bond'}
	];

	//On ajoute un filtre au tableau, avec un paramètre "a"
	this.filteredArray = filterFilter(this.array, 'a');
	}]);