更改嵌套ng重复中的$http参数
Change $http parameter in nested ng-repeat
我有两个json文件被请求用于两个不同的angularjs服务。
- /people.json
- {用户名,用户id}
- /task.json
- {name task,task id,responsible id}
Where responsible id=user-id
我可以向任务json传递一个ID参数,为ID为/task.json的用户请求所有任务?ID=12
我试图创建一个嵌套的ng repeat,第一个是在/people.json中获取所有用户,第二个是在循环中获取每个用户的所有任务,但我最终得到了这样的结果:https://i.stack.imgur.com/P2YZp.png
第一个ng重复正确地显示不同的用户,但第二个向列表中的其他用户显示第一个用户的相同任务。
?如何更改参数以正确更新嵌套的ng重复
我的服务:
.service('TeamworkPeopleSrvc', function($http, $q){
var deferred = $q.defer();
var TeamworkPeopleSrvc = this;
TeamworkPeopleSrvc.getPeople = function(){
$http.defaults.headers.common['Authorization'] = 'Basic ' + window.btoa('mycustomapikey' + ':' + 'X');
$http({
method: 'GET',
url: 'http://projects.com/people.json',
params: { 'pageSize':'5'},
})
.then(function(response) {
deferred.resolve(response);
});
return deferred.promise;
};
return TeamworkPeopleSrvc;
})
.service('TeamworkTasksSrvc', function($http, $q){
var deferred = $q.defer();
var TeamworkTasksSrvc = this;
TeamworkTasksSrvc.getTasks = function(id){
$http.defaults.headers.common['Authorization'] = 'Basic ' + window.btoa('mycustomapikey' + ':' + 'X');
$http({
method: 'GET',
url: 'http://projects.com/tasks.json' ,
params: { 'id':id, 'getSubTasks':'no', 'pageSize':'10'},
})
.then(function(response) {
deferred.resolve(response);
});
return deferred.promise;
};
return TeamworkTasksSrvc;
})
我的控制器
.controller('PeopleCtrl', function ($scope, TeamworkPeopleSrvc, TeamworkTasksSrvc) {
$scope.init = function(){
$scope.peopleObjects();
};
$scope.taskObjects = function(id){
TeamworkTasksSrvc.getTasks(id)
.then(function(response){
$scope.userTasklist = response.data['todo-items'];
});
};
$scope.peopleObjects = function(){
TeamworkPeopleSrvc.getPeople()
.then(function(response){
$scope.userlist = response.data.people;
});
};
$scope.init();
});
并尝试在模板中使用更新的用户id初始化任务
<div ng-controller="PeopleCtrl">
<div ng-repeat="person in userlist">
<h3>{{person['id']}} | {{person['first-name']}} {{person['last-name']}}</h3>
<div ng-init="taskObjects(person['id'])">
<div ng-repeat="task in userTasklist">
{{task['responsible-party-id']}} - {{task['content']}}
</div>
</div>
</div>
</div>
谨致问候。
问题出在控制器代码中。两个循环都使用相同的$scope
,这意味着每次调用taskObjects()
时,都会用新的任务列表覆盖$scope.userTasklist
。您应该为循环中的每个实例建立一个新的作用域,或者使$scope.userTasklist
成为一个属性与person.id
匹配的对象。
在您的控制器中更改:
$scope.taskObjects = function(id){
TeamworkTasksSrvc.getTasks(id)
.then(function(response){
if(!$scope.userTasklist) {
$scope.userTasklist = {};
}
$scope.userTasklist[id] = response.data['todo-items'];
});
};
然后在您的视图中使用:
<div ng-controller="PeopleCtrl">
<div ng-repeat="person in userlist">
<h3>{{person['id']}} | {{person['first-name']}} {{person['last-name']}}</h3>
<div ng-init="taskObjects(person['id'])">
<div ng-repeat="task in userTasklist['id']">
{{task['responsible-party-id']}} - {{task['content']}}
</div>
</div>
</div>
</div>
有缺陷的$q.defer
防图案1
.service('TeamworkPeopleSrvc', function($http, $q){
var deferred = $q.defer();
var TeamworkPeopleSrvc = this;
TeamworkPeopleSrvc.getPeople = function(){
$http.defaults.headers.common['Authorization'] = 'Basic ' + window.btoa('mycustomapikey' + ':' + 'X');
$http({
method: 'GET',
url: 'http://projects.com/people.json',
params: { 'pageSize':'5'},
})
.then(function(response) {
deferred.resolve(response);
});
return deferred.promise;
};
return TeamworkPeopleSrvc;
})
代码中的两个服务都使用有缺陷的$q.defer
反模式。对于在.getPeople
函数之外创建的deferred
对象,promise将只在第一次解析时解析一次。随后的解析被忽略,promise始终返回第一个值。此外,如果XHR有错误,则错误信息将丢失。有了错误,promise永远不会解决或只解决第一个已完成的XHR。
在没有$q.defer
的情况下实施
.service('TeamworkPeopleSrvc', function($http, $q){
var TeamworkPeopleSrvc = this;
TeamworkPeopleSrvc.getPeople = function(){
var authHeader = { Authorization: 'Basic ' +
window.btoa('mycustomapikey' + ':' + 'X')
};
var httpPromise = ($http({
method: 'GET',
url: 'http://projects.com/people.json',
headers: authHeader,
params: { 'pageSize':'5'},
})
);
return httpPromise;
};
return TeamworkPeopleSrvc;
});
要正确实现服务,只需返回$http
服务返回的promise即可。每次调用$http
函数时都会创建一个新的promise,并且错误信息将被正确保留。
- 如何将控制器http调用转换为接受参数的服务/工厂模式
- 使用不同参数的超级代理缓存缓存 HTTP 响应
- 无法在角度 js 中将参数传递给 http get 请求
- Angular 2:HTTP Post Request,带有URL参数和正文类型参数
- 更改嵌套ng重复中的$http参数
- HTTP GET中的C#MVC ASP.NET URL参数未正确编码
- $http().在传递带有“?”的额外Get参数时获取SyntaxError&”;
- 无法使用angularjs$http请求将参数发送到服务器操作方法
- 在angular 2中向http get请求传递url参数
- 使用C++获取HTTP get参数
- 如何在Angular中缓存http直到参数更改
- Angularjs$http.post-将参数作为JSON发送到ASPXwebmethod
- AngularJS$http POST请求,带有JSON参数AND查询字符串
- 如何在 AngularJS 中与其他参数一起上传 http.post 的图像文件
- 手动将 AngularJS $http参数对象转换为 URL 参数
- 使用jquery如何在浏览器中返回图像后更改图像src属性的http参数
- 对象作为$http参数
- 角度$http参数编码问题
- HTTP参数项共享相同的密钥
- 如何创建一个将默认参数编码为JSON而不是HTTP参数的存储