将数组样式的查询参数传递给Angularjs中的资源
Passing array style query parameters to a resource in Angularjs
我目前正在使用一个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
}
}
);
})
通常情况下,如果我只想向现有的$scope.paramers对象添加filter:"1",这就可以了。然而,我需要以某种方式添加filter[number]=1。我该如何处理ng模型和我目前的设置?
查看您的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
相关文章:
- AngularJs 1.3$资源忽略了一些字符
- AngularJS——资源并在实现之前使用它们
- 在AngularJS$资源模块上请求之前获取URL
- 如何设计基于angularJS资源的授权路由
- AngularJS资源 - 加载多个资源
- 如何使用 Angularjs 资源获取数据
- 使参数在 angularjs 资源中可选
- 服务功能中的AngularJS$资源
- 未调用Angularjs资源工厂transformResponse
- 具有表之间关系的AngularJS资源
- Angularjs资源错误:a.push不是一个函数
- 一个程序PhantomJS如何等待AngularJS$资源解析,然后再尝试测试返回的数据
- AngularJS$资源不工作
- 使用params对AngularJs$资源查询进行单元测试
- AngularJS资源工厂总是返回空响应
- 对AngularJS资源保存动作的承诺
- 使用查询字符串搜索 AngularJS 资源
- Angularjs资源没有返回正确的值
- AngularJS:资源没有发送带有未定义变量的参数
- AngularJS资源没有正确形成url