freccia di ordinamento ng-repeat che non funziona con i dati javascript

Question

Sono molto nuovo su AngularJs e datatables. Ho bisogno di popolare i dati nelle righe della tabella usando ng-repeat. Iam è in grado di popolare le righe e abilitare l'ordinamento per la prima volta. Quando clicco sulle frecce per ordinare ascendere o discendere la cancellazione dei dati della riga.

Ecco il mio dati della tabella

<table datatable="ng" id="example" class="display" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
         <th class="col1">Campaign Name</th> 
         <th class="col4">Description</th> 
         <th class="col5">Activate/Deactivate</th> 
         <th class="col5">edit</th> 
         <!-- <th class="col5">status</th> --> 
         <!-- <th class="col5">Details</th> --> 
        </tr> 
       </thead> 
       <tbody > 
        <tr ng-repeat="campaign in campaignListData"> 
          <td>{{campaign.campaignObject.campaignName}}</td> 
          <td>{{campaign.campaignObject.campaignMessage}}</td> 
          <td><button type="button" class="pay-amount pending" style="margin-top:-10px;margin-right:17px;width:128px;height:34px" 
          value = "{{ campaign.campaignObject.label }}" title="ACTIVATE" ng-click="updateCampaignStatus(campaign.campaignObject.id)"> 
           <span style="margin-left:-10px;margin-right:17px;width:128px;height:34px">{{ campaign.campaignObject.label }}</span> 
           </button> 
          </td> 
          <td><a href="<c:url value="${contextPath}/merchant/manageCampaign/editCampaignConfiguration"/>?campaignId={{ campaign.campaignObject.id }}"> 
           <img class="tableImage" style="margin-left:-8px;margin-top:-10px;" src="<c:url value="/resources/images/setting.png" />" ></a> 
          </td> 
        </tr> 
       </tbody> 
      </table> 

Ecco il mio ordinamento codice javascript

<script type="text/javascript"> 
    $(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" ] ] 
      }); 
     } 
    }); 
</script> 

Sto diventando conteggio delle righe per Tr è 1

ho il file js incluso alla fondo della pagina

<script src="<c:url value="/resources/js/CampaignListController.js" />"></script> 
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" />"></script> 

Quando Im carico i dati il ​​suo caricamento fine con ng-repeat. Ma quando clicco sull'intestazione per ordinare in ordine crescente o decrescente, le righe vengono cancellate.

Si prega di avvisarmi dove sto sbagliando? Non riesco a ordinare i dati in ordine crescente, decrescente e impaginazione non funziona affatto.

Ci scusiamo per il mio inglese.

Answer 1

Senza offesa, ma questo è un tipico mix di jQuery e pensiero angolare, o una mancanza di comprensione di come funziona Angular. Ecco un tentativo di racchiudere qualche logica jQuery nel angular digest loop. Leggi l'ottima risposta alla domanda “Thinking in AngularJS” if I have a jQuery background?

Non è possibile combinare mai $(document).ready(function() { e Angolare. In effetti, puoi essere certo che il tuo ready() viene eseguito molto prima che Angular abbia completato la sua attività ng-repeat. Ecco perché si ottiene sempre 1 per il conteggio delle righe (intestazione) e perché le righe spariscono quando si fa clic sulle intestazioni. Nel momento in cui si ottiene il conteggio delle righe non sono state inserite righe e al momento di istanziare dataTable(), non è stata inserita alcuna riga.

È possibile utilizzare $timeout per forzare ritardo del codice, o forzarlo nel prossimo ciclo digerire:

$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) 
} 

o creare un directive che crea un'istanza della dataTable volta che i dati è popolato da ng-repeat, come dimostrato in risposte multiple per ng-repeat finish event:

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

...

<tr ng-repeat="campaign in campaignListData" repeat-done="initDataTable"> 

...

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

Spero che questo vi aiuterà fuori.

Answer 2

L'esempio seguente utilizza AngularJs e Datatable. Il filtraggio, l'impaginazione e lo smistamento funzionano bene.

Download angular-datatable e inserire angular-datatables.min.js file nel tuo progetto come faccio nella linea <script src="angular-datatables/dist/angular-datatables.min.js"></script>

Spero che questo possa aiutarti.

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <script src="angular-datatables/dist/angular-datatables.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> 
    </head> 
    <body> 
     <div ng-app="AngularWayApp" ng-controller="AngularWayCtrl"> 
      <table datatable="ng" class="table"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>City</th> 
         <th>Country</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="name in names" ng-click="testingClick(name)"> 
         <td>{{name.Name}}</td> 
         <td>{{name.City}}</td> 
         <td>{{name.Country}}</td> 
         </tr> 
       </tbody> 
      </table> 

      <script> 
       var app = angular.module('AngularWayApp', ['datatables']); 

       app.controller('AngularWayCtrl', function($scope, $http) 
       { 
        $http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response) 
        { 
         $scope.names = response.records; 
        }); 

        $scope.testingClick = function(name) 
        { 
         console.log(name); 
        }; 
       }); 
      </script> 
     </div> 
    </body> 
</html>