web-dev-qa-db-fra.com

Colonnes de table triables avec AngularJs

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.

angularjsangularjs-ng-repeat
9
Dan

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. 

25
kmdsax

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;
    }
};
7
Srisudhir T

Voici ma solution. J'enveloppe également le tout dans une directive. La seule dépendance est UI.Bootstrap.pagination, qui a fait un excellent travail en pagination.

Voici le plunker

Voici le code source github.

5
maxisam

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

0
zizzamia