J'essaie d'utiliser AngularJS pour mon premier projet (un gestionnaire de tournois) et le filtre orderBy
sur ng-repeat
_ ne fonctionne pas :( j'ai lu tous les documentation à ce sujet , mais rien à faire: /
Donc, j'ai vars défini sur $scope
comme ça :
$scope.order_item = "count_win";
$scope.order_reverse = false;
$scope.teams = {
100 : {
id: 100,
name: "XXX",
count_win: 1,
count_loose: 2,
goal_average: 1,
},
200 : {
id: 200,
name: "XXX",
count_win: 1,
count_loose: 2,
goal_average: 1,
},
[...]
};
Maintenant, à mon avis, j'essaie de réorganiser (d'abord avec un seul article de commande) mais ne fonctionne jamais ...
<tr ng-repeat="team in teams | orderBy:order_item:order_reverse">
<td>{{team.name}}</td>
<td>{{team.count_loose}}</td>
<td>{{team.goal_average}}</td>
</tr>
La deuxième fois, je souhaite réorganiser deux informations: count_win
et goal_average
si les premiers sont égaux .. j'essaie de remplacer $scope.order_item
comme ça, mais si avec un code ne fonctionne pas, il ne travaillera jamais avec 2 ...
$scope.order_item = ['count_win','goal_average'];
Merci à tous pour la lecture et désolé pour la taille du post.
$scope.teams
_ n'est pas un tableau (c'est un objet d'objets), et le filtre orderBy
ne fonctionne qu'avec les tableaux. Si tu fais $scope.teams
un tableau, ça va marcher:
$scope.teams = [
{
id: 100,
name: "team1",
count_win: 3,
count_loose: 2,
goal_average: 2,
},
{
id: 200,
name: "team2",
count_win: 3,
count_loose: 2,
goal_average: 1,
},
{
id: 300,
name: "team3",
count_win: 1,
count_loose: 2,
goal_average: 1,
}
];
Ou, vous pouvez ajouter un filtre spécial qui fonctionne sur les objets, comme ceci (emprunté à ici ):
app.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.Push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
Et utilisez-le comme ceci:
<tr ng-repeat="team in teams | orderObjectBy:order_item:order_reverse">
Notez que ce filtre personnalisé ne fonctionnera pas avec un tableau d'ordres de tri comme dans la deuxième partie de votre question.
Vous n'avez pas à créer de paramètre d'étendue pour votre orderBy, vous pouvez le faire directement dans votre balisage si vous utilisez des tableaux.
<tr ng-repeat="team in teams | orderBy:count_win:false">
Avec deux paramètres, vous devriez juste faire
<tr ng-repeat="team in teams | orderBy:['count_win','goal_average']">
Après pour une commande plus complexe, vous pouvez créer une fonction dans votre scope comme ceci:
$scope.customOrder = function (team) {
//custom
}
Et appelez-le comme
<tr ng-repeat="team in teams | orderBy:customOrder">
Comme @Jerrad a dit, ng-repeat
ne fonctionne qu'avec les tableaux, vous devez donc convertir l’objet de votre équipe en tableau pour le faire fonctionner correctement.
ng-repeat ne fonctionne que sur les tableaux, pas sur les objets JSON. Cela a déjà été discuté ici: Angulaire - Impossible de faire la commande ng-repeat orderBy
Vous devez soit changer l'objet JSON en tableau, soit le convertir à la volée. Le contrôleur pourrait alors ressembler à ceci:
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
$scope.teams = [
{
id: 100,
name: "A Team",
count_win: 1,
count_loose: 2,
goal_average: 1
},
{
id: 200,
name: "C Team",
count_win: 2,
count_loose: 3,
goal_average: 4
},
{
id: 300,
name: "B Team",
count_win: 4,
count_loose: 1,
goal_average: 8
}
];
$scope.predicate = 'name';
});
J'ai créé un violon ici avec une démo contenant vos données: