La flèche de sorting ng-repeat ne fonctionne pas dans les tables de données javascript

Je suis très nouveau pour AngularJs et datatables. J’ai l’obligation de renseigner les données dans les lignes d’un tableau à l’aide de ng-repeat. Je suis capable de renseigner les lignes et d’activer le sorting pour la première fois. Quand je clique sur les flèches pour sortinger ascendant ou descendant les données de la ligne effacées.

Voici mes données de table

 <!--  --> <!--  --> 
Campaign Name Description Activate/Deactivate editstatusDetails
{{campaign.campaignObject.campaignName}} {{campaign.campaignObject.campaignMessage}} ?campaignId={{ campaign.campaignObject.id }}"> " >

Voici mon code javascript de sorting

  $(document).ready(function() { $("#noCampaignData").hide(); //$("#example_paginate").hide(); var rowCount = $("#example tr").length; console.log("Row count value is"+rowCount); if (rowCount >= 0) { console.log("Entered into Sorting"); $("#example").dataTable({ "pagingType" : "full_numbers", "order" : [ [ 2, "desc" ] ] }); } });  

Je reçois un nombre de lignes pour tr est 1

J’ai le fichier js inclus au bas de la page

 "> "> 

Lorsque je charge des données, son chargement fin avec ng-repeat. Mais lorsque je clique sur l’en-tête pour sortinger par ordre croissant ou décroissant, les lignes sont effacées.

S’il vous plaît me conseiller où je vais mal? Je suis incapable de sortinger les données par ordre croissant, décroissant et la pagination ne fonctionne pas du tout.

Désolé pour mon anglais.

    Sans vouloir vous offenser, c’est un mélange typique de pensées jQuery et Angular, ou encore un manque de compréhension du fonctionnement d’Angular. Voici une tentative pour intégrer une logique jQuery dans la boucle de digestion angular . Lisez une excellente réponse à la question «Penser sous AngularJS» si j’ai un arrière-plan jQuery?

    Vous ne pouvez jamais combiner $(document).ready(function() { et Angular). En fait, vous pouvez être très sûr que votre ready() est exécuté longtemps avant qu’Angular n’ait terminé ses transactions ng-repeat . C’est pourquoi vous obtenez toujours 1 pour le nombre de lignes (l’en-tête) et la raison pour laquelle les lignes disparaissent lorsque vous cliquez sur les en-têtes. Au moment où vous obtenez le nombre de lignes, aucune ligne n’est insérée, et au moment où vous instanciez le dataTable() , aucune ligne n’a été inséré.

    Vous pouvez utiliser $timeout pour forcer le délai du code, ou le forcer dans la prochaine boucle de digestion:

     $scope.initDataTable = function() { $timeout(function() { $("#noCampaignData").hide(); //$("#example_paginate").hide(); var rowCount = $("#example tr").length; console.log("Row count value is"+rowCount); if (rowCount >= 0) { console.log("Entered into Sorting"); $("#example").dataTable({ "pagingType" : "full_numbers", "order" : [ [ 2, "desc" ] ] }); } }, 200) } 

    ou créez une directive qui instancie le dataTable une fois les données renseignées par ng-repeat , comme illustré dans plusieurs réponses pour l’ événement de fin ng-repeat :

     .directive('repeatDone', function() { return function(scope, element, attrs) { if (scope.$last) { // all are rendered scope.$eval(attrs.repeatDone); } } }) 

      

     $scope.initDataTable = function() { $("#noCampaignData").hide(); $("#example").dataTable({ ... }); } 

    Espérons que cela va vous aider.

    L’exemple ci-dessous utilise AngularJs et Datatable. Le filtrage, la pagination et le sorting fonctionnent bien.

    Téléchargez angular-datatable et mettez le fichier angular-datatables.min.js dans votre projet comme je le fais dans la ligne

    J’espère que cela peut vous aider.

                
    Name City Country
    {{name.Name}} {{name.City}} {{name.Country}}