2017-07-25 1 views
0

私は私のAPIからGET呼び出しを行う場所だから私はされて、検索して、ブートストラップのテーブルを作成しようと、データがGET calllここブートストラップ表はGET JSONデータ

<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> 

から来るでソートしています。データは入っていますが、ブートストラップテーブルのソートとソートは機能しません。ブートストラップテーブルにこの呼び出しを設定するにはどうすればよいですか?

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

答えて

0

データを正しくフェッチしていますが、反復が間違っています。

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> 

Javascriptの一部:

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

filter: searchKeywordは、追加の入力フィールドに入力されたキーワードを使用します。このようにして、基本的にテーブルを検索することができます。残った結果は、$scope.orderKeywordの中に格納されている属性名を(orderBy)の順に並べます。私はhospital_nameで初期化しました。

フィルタリングの程度や並べ替えの方向性など、ロジックを追加することができます。

ここで問題になっている二つのフィルタのためのドキュメントです:

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

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

は、