Bootstrap Tabelle GET JSON Daten

Question

Also ich versuche Bootstrap-Tabelle mit Suche zu machen und Sortieren mit den Daten von einem GET Calll kommenden

<table id="example" class="table table-bordered table-striped table-hover" data-search="true"> 
    <thead> 
     <tr class="text-white clickable-row" bgcolor="#578ebe" > 
     <th id="white-text"> # </th> 
     <th id="white-text"> Name </th> 
     <th id="white-text"> DBA </th> 
     <th id="white-text"> Facility ID </th> 
     <th id="white-text"> Active </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="hospital in hospital_filtered = hospitals"> 
     <td> <a ng-click="click(hospital)"> {{ hospital.hospital_id }} </td> 
     <td> <a ng-click="click(hospital)"> {{ hospital.hospital_name }} </td> 
     <td> <a ng-click="click(hospital)"> {{ hospital.hospital_dba }} </td> 
     <td> <a ng-click="click(hospital)"> {{ hospital.facility_id }} </td> 
     <td> <a ng-click="click(hospital)"> {{ hospital.active_flag }} </td> 
     </tr> 
    </tbody> 
    </table> 

Hier ist, wo ich den GET-Anruf von meinem API machen. Die Daten kommen herein, aber die Sortierung und Sortierung der Bootstrap-Tabelle funktioniert nicht. Wie befülle ich die Bootstrap-Tabelle mit diesem Aufruf?

$http.get("/hospitals/all", { 
      params: {authtoken: $rootScope.auth_token}} 
     ) 
     .then(function(response) { 
      // Request completed successfully 
      //console.log(response); 
      $scope.hospitals=response.data 

     }, function(x) { 
      // Request error 
      console.log("Error"); 
     }); 
     }); 

Answer 1

Sie holen die Daten korrekt, aber die Iteration ist falsch.

HTML:

<input ng-model="searchKeyword" type="text"> 
<table id="example" class="table table-bordered table-striped table-hover" data-search="true"> 
<thead> 
    <tr class="text-white clickable-row" bgcolor="#578ebe" > 
    <th id="white-text" ng-click="changeSort('hospital_id')"> # </th> 
    <th id="white-text" ng-click="changeSort('hospital_name')"> Name </th> 
    <th id="white-text" ng-click="changeSort('hospital_dba')"> DBA </th> 
    <th id="white-text" ng-click="changeSort('facility_id')"> Facility ID </th> 
    <th id="white-text" ng-click="changeSort('active_flag')"> Active </th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="hospital in hospitals | filter: searchKeyword | orderBy: orderKeyword"> 
    <td> <a ng-click="click(hospital)"> {{ hospital.hospital_id }} </td> 
    <td> <a ng-click="click(hospital)"> {{ hospital.hospital_name }} </td> 
    <td> <a ng-click="click(hospital)"> {{ hospital.hospital_dba }} </td> 
    <td> <a ng-click="click(hospital)"> {{ hospital.facility_id }} </td> 
    <td> <a ng-click="click(hospital)"> {{ hospital.active_flag }} </td> 
    </tr> 
</tbody> 
</table> 

Der Javascript Teil:

$scope.orderKeyword = 'hospital_name'; 
$scope.changeSort = function(sortAttr) { 
    $scope.orderKeyword = sortAttr; 
}; 

filter: searchKeyword das Schlüsselwort in das zusätzliche Eingabefeld eingegeben hat. Auf diese Weise können Sie die Tabelle grundsätzlich "durchsuchen". Die übriggebliebenen Ergebnisse werden dann geordnet nach (orderBy) dem Attributnamen, der in $scope.orderKeyword gespeichert ist. Ich initialisierte es mit hospital_name.

Sie können zusätzliche Logik hinzufügen, wie streng die Filterung und in welche Richtung die Sortierung sein soll.

Hier ist die Dokumentation für die beiden Filter in Frage:

https://docs.angularjs.org/api/ng/filter/orderBy

https://docs.angularjs.org/api/ng/filter/filter