Tableau triable colonnes avec AngularJs
Je suis en train de trier un tableau de données qui est rempli à partir d'un JSON source. Le code que j'ai est comme suit:
HTML:
<div ng-app="myApp">
<div ng-controller="PurchasesCtrl">
<table cellspacing="0">
<tr class="first">
<th class="first" ng:click="changeSorting(purchases.date)">Date</th>
<th ng:click="changeSorting(purchases.text)">Description</th>
<th ng:click="changeSorting(purchases.price)">Amount</th>
<th ng:click="changeSorting(purchases.availability)">Status</th>
</tr>
<tr ng-repeat="purchase in purchases.data">
<td class="first">{{purchase.date}}</td>
<td>{{purchase.text}}</td>
<td>{{purchase.price}}</td>
<td>{{purchase.availability}}</td>
</tr>
</table>
</div>
</div>
JS:
var myApp = angular.module("myApp",[]);
myApp.factory("Purchases", function(){
var Purchases = {};
Purchases.data = [
{
date: "10/05/2012",
text: "1 Lorem ipsum dolor sit amet ipsum dolor",
price: "£123.45",
availability: "1 Available until 10th Dec 2013"
},
{
date: "24/05/2012",
text: "2 Lorem ipsum dolor sit amet ipsum dolor",
price: "£234.56",
availability: "2 Available until 10th Dec 2013"
},
{
date: "20/05/2012",
text: "3 Lorem ipsum dolor sit amet ipsum dolor",
price: "£345.67",
availability: "3 Available until 10th Dec 2013"
}
];
return Purchases;
});
function PurchasesCtrl($scope, Purchases){
$scope.purchases = Purchases;
$scope.changeSorting = function(column) {
var sort = $scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
}
Violon: http://jsfiddle.net/7czsM/1/
Comme vous pouvez le voir j'ai essayé d'ajouter une fonction de clic à la table des en-têtes pour appeler une fonction qui trie les données, mais cela ne fonctionne pas.
J'ai vu un exemple de ce genre de chose qui fonctionne, ici: http://jsfiddle.net/vojtajina/js64b/14/, mais quand j'essaie d'appliquer le même genre de chose à mon scénario il se casse très rapidement; par exemple, j'ai essayé d'ajouter les en-têtes de tableau par programmation en JSON par adjonction de ce qui suit:
var Purchases = {};
Purchases.head = [
{
date: "Date",
text: "Text column",
price: "Price column",
availability: "Availability column"
}
Purchases.data = [
{
date: "10/05/2012",
text: "1 Lorem ipsum dolor sit amet ipsum dolor",
price: "£123.45",
availability: "1 Available until 10th Dec 2013"
},
Cela empêche rien, mais j'ai pensé qu'il serait possible d'ajouter de multiples ensembles de données à angle variable?
Je suis un total nouveau venu sur Angulaire, donc je suis vraiment coincé avec ce. Tous les pointeurs serait très apprécié, merci.
$scope.sort
fonction.Hmm, désolé, je ne me suivez?
OriginalL'auteur Dan | 2013-09-13
Vous devez vous connecter pour publier un commentaire.
Mis à jour jsfiddle: http://jsfiddle.net/gweur/
sza est droit, vous n'avez oublier le $scope.sorte d'objet, mais vous êtes également absente de l'orderBy le filtre dans votre ng-repeat
En outre, vous aurez besoin de transmettre explicitement le nom de la colonne à la changeSorting() de la fonction, comme
ne sais pas si c'est une autre façon que vous pouvez gérer cela.
Enfin, ng-click est la syntaxe correcte pour la version de AngularJS vous utilisez.
OriginalL'auteur kmdsax
Un autre très bon exemple de la construction du tableau triable
http://jsfiddle.net/vojtajina/js64b/14/
OriginalL'auteur Srisudhir T
Voici ma solution. J'ai aussi envelopper toute chose à une directive. La seule dépendance est l'INTERFACE utilisateur.Bootstrap.la pagination, qui a fait un excellent travail sur la pagination.
Ici est la plunker
Ici est la github le code source.
Il est base sur la chaîne. vous pouvez créer votre propre méthode de tri pour le remplacer. L'idée est sensiblement la même.
OriginalL'auteur maxisam
Ou vous pouvez utiliser #ngTasty comme simple table de la directive.
github : https://github.com/Zizzamia/ng-tasty
docs : http://zizzamia.com/ng-tasty/directive/table
OriginalL'auteur zizzamia