Est-il possible de .sort (comparer) et .reverse un tableau dans angularfire?
Mise à jour: le problème que j'ai a fait une combinaison de trois choses:
- Ajouter un en-tête à un tableau lorsque la priorité $ (définie à ce jour créé) change. C'est ainsi que je peux regrouper les tâches par semaine et par jour dans une répétition ng.
- Récupérer cette liste lorsqu'une tâche est cochée. Les tâches vérifiées doivent aller au bas.
- Lors de la création de nouvelles tâches, je dois les ajouter au haut de la liste au lieu du bas.
Voici un plnkr de tout le code: http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm
J'utilise une fonction PriorityChanged pour ajouter un en-tête en comparant les dates d'une tâche: // controller var last = null; $ Scope.priorityChanged = function (priority) {var current = moment (priority) .startOf ('day'); Var modifié = dernier === null || ! Last.isSame (actuel); Dernier = courant; Le retour a changé; };
//view <li ng-repeat="task in list track by task.$id"> <h3 ng-show="priorityChanged(task.$priority)">{{getDayName(task.$priority)}}</h3> Et pour déplacer une tâche au bas de la liste lorsqu'une tâche est terminée, j'utilise une fonction .sort lorsque je remplis la liste des tâches:
var populateTasks = function(start, end) { $scope.start = start; $scope.end = end; var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end); var list = $firebase(ref).$asArray(); list.sort(compare); list.$watch(function() { list.sort(compare); }); function compare(a, b) { return a.completeTime - b.completeTime; } $scope.list = list; };
Il semble que ces approches ne fonctionnent pas ensemble. Existe-t-il un moyen de les combiner de sorte que lorsque la liste est ré-triée, la ng-repeat parcourra à nouveau les tâches et ajouter les en-têtes nécessaires? Est-ce la solution idéale? L'en-tête peut-il être séparé?
Mise à jour: J'ai déplacé la fonctionnalité ng-init directement dans le h3 pour essayer de faire fonctionner cette opération, mais elle n'indique pas l'en-tête dans ce cas.
Update2: l'en-tête semble apparaître si au moins deux des dates de priorité $ sont uniques mais j'ai toujours le problème de supprimer ou de déplacer l'élément de liste associé à supprimer l'en-tête connecté.
UTILISER UNE DIRECTIVE
Vous pouvez créer une directive pour simplifier les choses en imbriquant le contenu de votre client. Démo
app.directive('repeatByWeek', function($parse, $window) { return { // must be an element called <repeat-by-week /> restrict: 'E', // replace the element with template's contents replace: true, templateUrl: 'repeat.html', // create an isolate scope so we don't interfere with page scope: { // an attribute collection="nameOfScopeVariable" must exist 'master': '=collection' }, link: function(scope, el, attrs) { // get the global moment lib var moment = $window.moment; scope.weeks = []; updateList(); // whenever the source collection changes, update our nested list scope.master.$watch(updateList); function updateList() { scope.weeks = sortItems(parseItems(scope.master)); } function sortItems(sets) { var items = []; // get a list of weeks and sort them var weeks = sortDescending(Object.keys(sets)); for(var i=0, wlen=weeks.length; i < wlen; i++) { var w = weeks[i]; // get a list of days and sort them var days = sortDescending(Object.keys(sets[w])); var weekEntry = { time: w, days: [] }; items.push(weekEntry); // now iterate the days and add entries for(var j=0, dlen=days.length; j < dlen; j++) { var d = days[j]; weekEntry.days.push({ time: d, // here is the list of tasks from parseItems items: sets[w][d] }); } } console.log('sortItems', items); return items; } // take the array and nest it in an object by week and then day function parseItems(master) { var sets = {}; angular.forEach(master, function(item) { var week = moment(item.$priority).startOf('week').valueOf() var day = moment(item.$priority).startOf('day').valueOf(); if( !sets.hasOwnProperty(week) ) { sets[week] = {}; } if( !sets[week].hasOwnProperty(day) ) { sets[week][day] = []; } sets[week][day].push(item); }); console.log('parseItems', sets); return sets; } function sortDescending(list) { return list.sort().reverse(); } } } });
Le modèle repeat.html:
<ul> <!-- it would actually be more elegant to put this content directly in index.html so that the view can render it, rather than needing a new directive for each variant on this layout; transclude should take care of this but I left it out for simplicity (let's slay one dragon at a time) --> <li ng-repeat="week in weeks"> <h3>{{week.time | date:"MMMM dd'th'" }}</h3> <ul> <li ng-repeat="day in week.days"> <h4>{{day.time | date:"MMMM dd'th'" }}</h4> <ul> <li ng-repeat="task in day.items"> <input type="checkbox" ng-model="task.complete" ng-change="isCompleteTask(task)"> <input ng-model="task.title" ng-change="updateTask(task)"> <span ng-click="deleteTask(task)">x</span> </li> </ul> </li> </ul> </li> </ul>
AUTRES IDÉES
Très probablement, il vous suffit de déplacer votre changement de ng-init. Je ne pense pas que cela soit ré-exécuté lorsque les éléments se déplacent / station.
<li ng-repeat="task in list"> <h3 ng-show="priorityChanged(task.$priority)">{{getDayName(task.$priority)}}</h3> <!-- ... --> </li>
Étant donné que votre liste peut recourir à plusieurs reprises, vous pouvez également obtenir une augmentation de vitesse assez importante en utilisant la piste par
<li ng-repeat="task in list track by task.$id">
Si cela ne résout pas le problème, il pourrait être temps de penser à écrire votre propre directive (ce sont plus amusants qu'eux) et peut-être envisager de mettre de côté AngularFire et aller directement à la source.
Vous voulez vraiment une structure de données plus ancrée ici, vous pouvez itérer à plusieurs niveaux, et vous devrez peut-être vous structurer soit sur le client ou le serveur, maintenant que vous avez un sens de la manière dont vous les souhaitez (généralement un groupe par Fonctionnalité semaine).
Vous pouvez utiliser la fonction " unshift " javascript
var fruits = ["1", "2", "3", "4"]; fruits.unshift("5","6");
Résultat
[ '5', '6', '1', '2', '3', '4' ]