Ng-repeat avec autodividers de JQuery Mobile
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:
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:
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:
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:
<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:
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 ?
