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 :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 ?