通过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 
} 

注意，这取决于你的后台，查询字符串也许应该通过（ '&类别[] = '）加入，而不是（' &类='）