Affichage d'une liste avec Angular-Material =========================================== ![category](web) ![tag](design) ![tag](angularjs) Un des écran les plus classique dans une application est la visualisation, la sélection d'élement d'une liste. Je vous propose dans cet article de voir comment on peut gérer l'ihm d'une liste avec angularjs et angular-material. Objectif -------- Afficher une liste d'employés, chaque employé pouvant être sélectionné pour être supprimé. Chaque utilisateur aura une bulle de couleur différentes (du moins aléatoire) ![201510270926_result1.png](./upload/201510270926_result1.png) Mise en place ------------- Au niveau du fichier javascript app.js nous allons placer dans le controller juste les fonctions: - détermination d'une couleur aléatoire - suppression d'un item A l'initialisation de l'application on rajoute pour chaque élément de la liste d'employés l'attribut **color** (de la bulle) ```javascript var module = angular.module("MyBookCustomer", ['picardy.fontawesome', 'ngMaterial' ]); // add theme module.config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('green') .accentPalette('orange') .warnPalette('red'); }); // add controler module.controller('AppController', function($scope, $mdSidenav, $http) { var getRandomColor = function() { return Math.floor(Math.random() * 16777215).toString(16); }; $scope.getInit = function() { $scope.employees = [{ name: 'John', age: 25, gender: 'boy' }, { name: 'Jessie', age: 30, gender: 'girl' }, { name: 'Johanna', age: 28, gender: 'girl' }, { name: 'Joy', age: 15, gender: 'girl' }, { name: 'Mary', age: 28, gender: 'girl' }, { name: 'Peter', age: 95, gender: 'boy' }, { name: 'Sebastian', age: 50, gender: 'boy' }, { name: 'Erika', age: 27, gender: 'girl' }, { name: 'Patrick', age: 40, gender: 'boy' }, { name: 'Samantha', age: 60, gender: 'girl' }]; for (var i = $scope.employees.length; i > 0; i--) { $scope.employees[i - 1].color = getRandomColor(); }; }; // manage display $scope.openLeftMenu = function() { $mdSidenav('left').toggle(); return; }; $scope.showNavIcon = function() { return !$mdSidenav('left').isLockedOpen(); }; $scope.deleteEmpl = function() { for (var i = $scope.employees.length; i > 0; i--) { if ($scope.employees[i - 1].selected) { $scope.employees.splice(i - 1, 1); }; }; return; }; // init data $scope.getInit(); }); ``` Toutes la gestion l'affichage de la liste, de l'affichage du bouton de suppression, de l'icone de sélection dans la bulle ```html ... ... ...

{{ item.name }}

{{ item.age }}

... ... ``` les points importants: - le click sur la bulle permet de placer l'attribut **selected** de l'employé (ng-click="item.selected = !item.selected") - l'affichage du **check** dans une bulle dépend de la valeur de l'attribut **selected** de l'employé (name="{{item.selected ? 'check' : ''}}") - l'affichage du bouton de suppression est dépendant de la longeur de la liste d'employés sélectionnés (ng-show="(employees | filter:{selected: true}).length") ```note notre application utilise le module angular-fontawesome pour gérer les icones ``` ```note on peut réaliser des if dans la partie html de ce type "condition ? sioui : sinon" ``` pour info le fichier mycss.css contient ```css /* appli */ md-list-item .md-button { margin-top: auto; margin-right: 10px; margin-bottom: auto; margin-left: auto; } .to-bottom { position:fixed; bottom:10px; right:10px; z-index: 99 !important; } /* angular */ #main{ padding: 20px; } .no-pc { display: none !important; } /* mobile-small */ @media all and (min-width: 0) and (max-width: 960px) { .no-mobile { display: none !important; } } ``` Modification de l'icone ----------------------- On souhaite maintenant avoir une icone "male" ou "female" suivant le genre de l'employé ![201510270926_result2.png](./upload/201510270926_result2.png) il suffit de remplacer dans le fichier html ```html ... ... ``` par ```html ... ...```