J'essaie de trier une table de données qui est renseignée à partir d'une source JSON. Le code que j'ai est le suivant:
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;
}
};
}
Fiddle: http://jsfiddle.net/7czsM/1/
Comme vous pouvez le constater, j'ai essayé d'ajouter une fonction de clic aux en-têtes de table 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 ça casse très vite; Par exemple, j'ai essayé d'ajouter les en-têtes de table par programmation dans JSON en ajoutant les éléments suivants:
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 simplement quoi que ce soit de fonctionner, mais j’ai pensé qu’il serait possible d’ajouter plusieurs ensembles de données à une variable Angular?
Je suis un nouveau venu total sur Angular alors je suis vraiment coincé avec ça. Tous les pointeurs seraient très appréciés, merci.
Mise à jour de jsfiddle: http://jsfiddle.net/gweur/
sza a raison, vous avez oublié l'objet $ scope.sort, mais le filtre orderBy manque également dans votre ng-repeat
|orderBy:sort.column:sort.descending
De plus, vous devrez explicitement passer le nom de la colonne à la fonction changeSorting (), comme
ng-click="changeSorting('text')"
je ne sais pas s'il existe une autre façon de gérer cela.
Enfin, ng-click est la syntaxe correcte pour la version d’AngularJS que vous utilisez.
Un autre très bon exemple de rendre une table triable
http://jsfiddle.net/vojtajina/js64b/14/
<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
scope.changeSorting = function(column) {
var sort = scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
Vous pouvez également utiliser #ngTasty comme directive de tableau simple. Github: https://github.com/Zizzamia/ng-tasty Docs: http: // zizzamia. com/ng-tasty/directive/table