Bonjour, je développe une petite application pour gérer une liste de course avec AngularJS et Jquery mobile, c'est mon 1er développement avec AngularJS.
Pour afficher la liste j'utilise ng-repeat :
1 2 3 4 5 6 7 8
| <ul id="listcourses" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Recherche" data-mini="true">
<li ng-repeat="course in courses">
<label>
<input type="checkbox" ng-model="course.done" id="course.index" ng-click="update_list()">
<span class="done-{{course.done}} morebig">{{course.text}}</span>
</label>
</li>
</ul> |
Je souhaite afficher les courses par catégorie (Epicerie, Surgelés, ...)
Le data-autodividers="true" par défaut(avec les 1ères lettres des mots) n'est pas pris en compte même en faisant un refresh de la listview :
1 2 3 4 5 6 7 8
| $('#page').on('pagecreate', function() {
$('#listcourses').listview({
autodividers: true,
autodividersSelector: function(li) {
return $(li).find('.morebig').text();
}
}).listview('refresh'); |
En googlelisant mon souci j'ai trouvé qu'on pouvait effectuer un traitement à la fin du ng-repeat en rajoutant une directive :
1 2 3 4 5 6 7
| .directive('repeatDone', function() {
return function(scope, element, attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
}) |
et en ajoutant dans la balise li :
<li ng-repeat="course in courses" repeat-done="refresh_autodividers()" ng-cloak>
refresh_autodividers() est une fonction du controller qui fait un refresh de la listview :
1 2 3
| $scope.refresh_autodividers = function() {
$('#listcourses').listview('refresh');
} |
Mais le résultat est qu'un seul divider apparaît avec le caractère "{"
Le refresh se fait avant que les variables angularjs {{course.text}} aient été mises à jour.
Pièce jointe 134342
Est-ce qu'il existe une autre solution pour que le refresh se lance une fois les valeurs mises à jour dans le dom ?
Partager