API呼び出しによるデータのフィルタリング

Question

私はこのテーブルのページとカスタムフィルタにテーブルを持っています。したがって、デフォルトではデータを読み込むAPI呼び出しを使用しています。

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

左側にはフィルタがあります。

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

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は私の質問は、私は複数のカテゴリに何をすべきかを持っていないされてスルーこのフィルター私が取得しています選択？

Answer 1

EDIT：詳しい説明があります。
あなたの目標は、のクエリ文字列を複数のカテゴリに絞り込むことです。

カテゴリ1が必要な場合は、
http：// address：8080/events-api/rest/Eventsのようなリクエストを行いますか？

ます。http：//アドレス：8080 /イベント-API 1

今、あなたはあなたの要求は次のようにする必要がありますので、単一のリクエストでカテゴリ1と6時にフィルタリングする= カテゴリ/休憩/イベント？ カテゴリ= 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 
} 

代わりに（ '&カテゴリ= '）のバックエンドに応じて、クエリ文字列は、多分（' &カテゴリ[] ='）により結合されるべき注意、