引导表 GET JSON 数据答案

【问题标题】：Bootstrap Table GET JSON Data引导表 GET JSON 数据
【发布时间】：2017-07-25 19:07:47
【问题描述】：

所以我正在尝试使用来自 GET 调用的数据进行搜索和排序来制作引导表

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

这是我从我的 API 进行 GET 调用的地方。数据进来了，但是引导表排序和排序不起作用。如何使用此调用填充引导表？

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

【问题讨论】：

标签： ruby-on-rails angularjs bootstrap-table

【解决方案1】：

您正确获取数据，但迭代错误。

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 将使用输入到附加输入字段中的关键字。这样，您基本上可以“搜索”表格。剩下的结果将按 (orderBy) 存储在 $scope.orderKeyword 中的属性名称进行排序。我用hospital_name初始化它。

您可以添加其他逻辑，例如过滤的严格程度以及排序的方向。

以下是有关两个过滤器的文档：

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

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

【讨论】：