Créez des listes dynamique avec Angular.js

Standard

Angular-ui-tree c’est quoi?

Angular-ui-tree is est un plugin Angular.js similaire à ceux que propose jQuery UI’s Sortable + Draggable. Cette directive d’Angular.js va vous permettre d’affiché, trier et organiser vos listes.

Bien que la directive ui-sortable tente de fournir des liaisons Angular.js pour jQuery UI sortable, la directive angular-ui-tree n’implémente pas jQuery ou jQuery UI en tant que dépendance. La mise en place d’une liste hiérarchisée est très simple. Tout d’abord, installez avec angular-ui-tree bower:

bower install angular-ui-tree

Puis ajoutez la feuille de style CSS entre les balises <HEAD> de votre page:

<link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css">

Ajoutez le script javascript en bas de votre page “index.html”:

<script type="text/javascript" src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>

ET injectez la dépendance dans votre votre angular:

var app = angular.module('monApp', [
    'ngAnimate',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.tree'
]);

Création de la vue et du controleur Angular

Vous devez maintenant créer le controlleur et la vue correspondante. Pour moi ce sera angularListController.js et angularListView.html. Vous avez aussi la possibilité d’utiliser Yeoman pour générer ces fichiers avec la commande suivante :

yo angular:controller angularListController 
yo angular:view angularListView

Votre vue (angularListView.html) et votre controleur (angularListController.js) étant maintenant crée, votre code doit ressembler à quelque chose comme ça :

<div ui-tree="treeOptions">
  <ol ui-tree-nodes="" ng-model="base.Items">
    <li ng-repeat="group in base.Items" ui-tree-node data-type="{{group.type}}">
      <div ui-tree-handle>
        {{group.GroupName}}
      </div>
      <ol ui-tree-nodes="" ng-model="group.Documents">
        <li ng-repeat="subItem in group.Documents" ui-tree-node data-type="{{subItem.type}}">
          <div ui-tree-handle>
            {{subItem.FileName}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>

La directeur ui-tree d’Angular prend “treeOptions” en paramètre un Objet qui va vous permettre d’intervenir sur différentes choses comme par exemple :

  • Un callback avant de déplacer l’objet
  • Un callback qui permet d’accepter ou non le déplacement de l’objet
  • Un callback une fois que l’objet à été “dropper” (et accepter -> voir le callback précédent)

Le controleur ressemble à quelque chose comme ça :

$scope.treeOptions = {
    beforeDrag: function(sourceNodeScope) {
        return !!$rootScope.globals.currentUser.isAdmin;
    },
    accept: function(sourceNodeScope, destNodesScope, destIndex) {
        // The source of the element being dragged
        // La source
        var srcId = sourceNodeScope.$modelValue.Id;

        // Le noeud de destination
        var destId = destNodesScope.$modelValue[0].Id;

        // Vérifie la source et la destination
        if (srcAppendixId === destAppendixId) $scope.acceptable = true;

        return $scope.acceptable;
    },
    dropped: function(event) {

        if ($scope.acceptable) {
            var srcNode = event.source.nodeScope;
            var destNodes = event.dest.nodesScope;
            var srcId = srcNode.$modelValue.Id;
            var success = false;

            if (srcId !== undefined) {
                // Do something
            }
        }
        // Désactive le déplacement des futures objets
        $scope.acceptable = false;
    }
};

Et c’est tout! N’hésitez pas à me poser vos questions en cas de soucis. Je me ferais un plaisir de vous aider!

Quelques liens utiles