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

Posted 2023-03-04

【中文标题】将数组样式查询参数传递给Angularjs中的资源

【英文标题】：Passing array style query parameters to a resource in Angularjs

【发布时间】：2016-03-03 14:39:38

【问题描述】：

我目前正在使用一个使用数组样式查询参数来过滤项目的 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 和我当前的设置来解决这个问题？

【问题讨论】：

尝试在$http/$resourceparamSerializer属性中指定$httpParamSerializerJQLike

你必须使用'LFGFactory.query'吗？如果您在 url 参数中有特殊需求，则可以更轻松地构建自己的 url 和参数。

【参考方案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

【讨论】：

不错的方法。唯一的问题是它作为 filter=%7B%22name%22:%221182%22%7D 发送到服务器。在发布数据中，我将其视为 filter:"name":"1182" 而不是 filter[name]:"1182"

那我需要查看LFGFactory.query的代码。它是如何将“数字”更改为“名称”的？它不遵循 jQuery 参数规则。

我得到 filter%5Bnumber%5D=1184 即 filter[number]=1184

查看更新。如果这不起作用，我需要查看LFGFactory.query 的代码。

.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 ); )