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

Question

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

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

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

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

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

虽然我的观点如下:

        <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('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
          }
        }
    );
  }) 

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

Answer 1

查看您的 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 } } 
      );

}) 

您正在使用ngParamSerializer

将您的select元素更改为：

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

JSFiddle​