将数组样式查询参数传递给Angularjs中的资源

I'm currently working with an API that uses array style query parameters to filter items but I'm not quite sure how to get this working in Angular.

我目前正在使用一个使用数组样式查询参数来过滤项目的API,但我不太确定如何在Angular中使用它。

In my example below I have a drop down that takes the ng-model of the selection and applies this to the list of paramenters and then fires a method to filter my list. Normally that is simple when dealing with normal key value. However in this case the URL calls for something like the following:

在下面的示例中,我有一个下拉列表,它采用选择的ng模型并将其应用于参数列表,然后触发一个方法来过滤我的列表。通常,在处理普通键值时这很简单。但是在这种情况下,URL会调用以下内容:

example.com/api/list?filter[number]=1

My current set up looks like so

我目前的设置看起来像这样

$scope.paramers = {
    include: 'playing', 
    sort: '-id'
};
$scope.refresh = function () {
    LFGFactory.query($scope.paramers, function success (response) {
        $scope.loading = true;
        var data = response.data;
        if (data.length >= 1) {
            $scope.rowList = data;
            $scope.loading = false;
        } else {
            $scope.loading = false;
        }
    },
    function err (data) {
        console.log(data);
    });
};

While my view looks like so:

虽然我的观点如下:

        <div class="form-group pull-right">
            <select id="plat-sel" name="plat-sel" class="form-control" ng-model="paramers.filter" ng-change="refresh()">
                <option value="" disabled selected>Filter by Platform</option>
                <option value="1183">Xbox One</option>
                <option value="1184">PlayStation 4</option>
                <option value="1182">PC</option>
                <option value="1188">Wii U</option>
                <option value="1186">Xbox 360</option>
                <option value="1185">PlayStation 3</option>
            </select>
        </div>

Factory below

  .factory('LFGFactory', function($resource) {

    var base = 'http://example.com/api/v1.0/';


    return $resource(base +'lfg', {},
        {
          update: {
            method: 'PUT',
            isArray: true
          },
          delete: {
            method: 'DELETE',
            isArray: true
          },
          query: {
            method: 'GET',
            isArray: false
          }
        }
    );
  })

Normally this would be fine if all I wanted was to add filter:'1' to the existing $scope.paramers object. However I need to somehow add filter[number] = 1 instead. How would I go about this with ng-model and my current set up?

通常,如果我想要的是添加过滤器:'1'到现有的$ scope.paramers对象,那就没问题了。但是我需要以某种方式添加filter [number] = 1。我将如何使用ng-model和我目前的设置来解决这个问题?

1 个解决方案

#1

Looking at your LFGFactory service:

看看你的LFGFactory服务:

angular.module('myApp').factory('LFGFactory', function($resource) { 
      var base = 'example.com/api/v1.0/';
      return $resource(base +'lfg', {}, 
            { update: { method: 'PUT', isArray: true }, 
              delete: { method: 'DELETE', isArray: true }, 
              query:  { method: 'GET', isArray: false } } 
      );

})

You are using ngParamSerializer

您正在使用ngParamSerializer

Change your select element to:

将您的选择元素更改为:

 <select id="plat-sel" name="plat-sel" class="form-control" 
          ng-model="paramers['filter[number]']" ng-change="refresh()">

The JSFiddle

#1