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

Question

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

在我下面的示例中，我有一个下拉列表，它采用选择的 ng-model 并将其应用于参数列表，然后触发一个方法来过滤我的列表。通常这在处理普通键值时很简单。然而，在这种情况下，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
          }
        }
    );
  }) 

如果我只想将 filter:'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