通過API調用過濾數據

Question

我在我的頁面上有一個表格，併爲此表格定製了過濾器，所以默認情況下我使用的API調用來加載數據。

$('#table').bootstrapTable('refreshOptions', { 
url: 'http://address:8080/events-api1/rest/Events/' 
}); 

在左邊我有過濾器。該過濾器我得到直通HTTP GET方法

$http({ 
      method: "GET", 
      url: "http://address:8080/events-api1/rest/EventTypeCategories" 
     }).then(function success(response) { 
      $scope.categories = response.data; 
     }, function error(response) { 
      $scope.categories = response.statusText; 
     }); 

和渲染濾鏡直通範圍功能

$scope.selectCat = function() { 
      angular.forEach($scope.categories, function (category) { 
       if (category.selected) { 

        $scope.selectedAllCat = false; 

        if (category.name == "Study") { 
         $scope.checked = true; 
         $('#table').bootstrapTable('refreshOptions', { 
          url: 'http://address:8080/events-api1/rest/Events?category=1' 
         }); 
        } 
        else if (category.name == "Corporate") { 
         $scope.checked = true; 
         $('#table').bootstrapTable('refreshOptions', { 
          url: 'http://address:8080/events-api1/rest/Events?category=2' 
         }); 
        } 
        else if (category.name == "Safety") { 
         $scope.checked = true; 
         $('#table').bootstrapTable('refreshOptions', { 
          url: 'http://address:8080/events-api1/rest/Events?category=3' 
         }); 
        } 
        else if (category.name == "Partners") { 
         $scope.checked = true; 
         $('#table').bootstrapTable('refreshOptions', { 
          url: 'http://address:8080/events-api1/rest/Events?category=4' 
         }); 
        } 
        else if (category.name == "Standards") { 
         $scope.checked = true; 
         $('#table').bootstrapTable('refreshOptions', { 
          url: 'http://address:8080/events-api1/rest/Events?category=5' 
         }); 
        } 
        else if (category.name == "Technology") { 
         $scope.checked = true; 
         $('#table').bootstrapTable('refreshOptions', { 
          url: 'http://address:8080/events-api1/rest/Events?category=6' 
         }); 
        } 
       } 

      }); 
     }; 

HTML

<div class="panel-body"> 
         <table class="table"> 
          <tr> 
           <td class="col-md-1"> <input type="checkbox" ng-model="selectedAllCat" ng-click="selectAllCat()">&nbsp;</td> 
           <td class="col-md-9">All</td> 
           <td class="col-md-2"> 
            {{ categories.length }} 
           </td> 
          </tr> 
          <tr ng-repeat="category in categories | orderBy : 'id' "> 
           <td class="col-md-1"> <input type="checkbox" ng-model="category.selected" ng-click="selectCat()">&nbsp;</td> 
           <td class="col-md-9">{{ category.name }}</td> 
           <td class="col-md-2"> 
            {{ category.selected }} 
           </td> 
          </tr> 
         </table> 
        </div> 

     <table id="table" 
          data-flat="true" 
          data-toggle="table" 
          data-toolbar="#toolbar" 
          data-search="true" 
          data-show-toggle="false" 
          data-show-columns="true" 
          data-show-export="true" 
          data-filter-control="true" 
          data-events="operateEvents" 
          data-formatter="operateFormatter" 
          data-response-handler="responseHandler" 
          class="table-striped"> 
        </table> 

我的問題是我有什麼對多個類別做選擇？

Answer 1

編輯：有更多的解釋。
您的目標是編寫查詢字符串，以便能夠根據多個類別進行過濾。

當您想要類別1時，請執行以下請求：
http：// address：8080/events-api/rest/Events？ 類別= 1

現在，你要在1類和第6單個請求進行過濾，所以你的要求應該是這樣的：

的http：//地址：8080 /事件的API /休息/活動？ 類別= 1個&類別= 6

所以，在你的代碼，你應該：
更改標記從：

<td class="col-md-1"> <input type="checkbox" ng-model="category.selected" ng-click="selectCat()">&nbsp;</td>
到： <td class="col-md-1"> <input type="checkbox" ng-click="updateFilter(category.id)">&nbsp;</td>

以下功能將幫助我們跟蹤當前標記的過濾器：

$scope.selectedFilters = []; 
    $scope.updateFilter = function(categoryId) { 

     if ($scope.selectedFilters.indexOf(categoryId) > -1) { 
      $scope.selectedFilters.push(categoryId); 
     } else { 
     $scope.selectedFilters.splice($scope.selectedFilters.indexOf(categoryId), 1); 
    } 

    //Optional, to reload on change. 
    $scope.requestEvents(); 
} 

：下面的函數來請求數據，基於所選擇的過濾器，也將工作，而無需過濾器在所有。

$scope.requestEvents() { 
    var url = 'http://address:8080/events-api/rest/Events'; 

    if ($scope.selectedFilters.length > -1) { 
     var queryString = '?category='; 
     queryString += $scope.selectedFilters.join('&category='); 
     url += queryString; 
    } 
    $('#table').bootstrapTable('refreshOptions', { 
     'url': url 
    }); 
} 

- 舊版本 - 不知道這將是第一次清楚，但缺乏從你身邊細節的到期。因此，保持代碼風格，你可以寫這樣的東西。

$scope.filterByCategory = function(categories) { 
    //Assuming you have in categories, an array of numbers, (or 
    //strings, anyway they should match categories from your backend) 
    categories = categories.join('&category='); 
    $('#table').bootstrapTable('refreshOptions', { 
     url: 'http://address:8080/events-api/rest/Events?category=6' + categories 
} 

注意，這取決於你的後臺，查詢字符串也許應該通過（ '&類別[] = '）加入，而不是（' &類='）