设置动态 $http.get 请求(Angular) [英] Setting up dynamic $http.get request (Angular)

问题描述

我想知道如何动态更改 $http 调用，以便 $http 请求 URL 根据在 ng-repeat 列表中单击的元素而有所不同.但我卡住了.

<小时>

目前，我在我的索引页上设置了 ng-repeat:

<a href="#/nation-details/{{team.team_id}}"><h2>{{team.team_name}}</h2></a><p>团队 ID = {{team.team_id}}</p>

变量 getStandings 是通过 $http 调用从 API 中获取的.像这样:

在积分榜服务

返回 $http.get('http://api.com/standings/1005?Authorization=xxxx').成功(功能(数据){返回数据；}).错误(功能(错误){返回错误；});

然后StandingsService 附加到我的控制器中的getStandings 变量.

1005"是一个属性，它从一系列比赛中调用一个特定的数组，在这种情况下是一个特定的体育比赛.

因此，在我的索引页面上，我使用 ng-repeat 列出该比赛中的所有团队.

正如你在上面的 html 中看到的，我已经链接了每个团队，以便它动态生成一个 URL，将 team_id 附加到末尾，使用 $routeParams我定义为变量 whichTeam.

团队详细信息页面

动态团队 ID = {{whichTeam}}

这很好用，团队 ID 是根据点击的团队动态生成的.

<小时>

就像上面的StandingsService"一样，我有另一个名为TeamService"的服务，它发出一个 $http 请求来拉取团队数据.目前虽然它被静态设置为向单个团队发出呼叫 - 我想让该服务接受 whichTeam 变量，以便呼叫根据点击的团队而变化.

这是静态团队 $http 请求(我已将 URL 分开并连接起来以使其更清晰):

 返回 $http.get('http://api.com/team/' + '16110' + '?Authorization=xxxx')

我希望引用一个团队的 16110 部分是一个 whichTeam 变量，允许它提取正确的个人团队数据，但我不不知道如何写这个(或者如果可能的话).

我希望我已经清楚了 - 如果需要，我很乐意进一步澄清.提前致谢.

解决方案

做工厂:

app.factory("DataService", ["$http", function($http) {返回 {getTeamDetailsById:函数(teamId){return $http.get('path/to/api' + teamId + '?Auth=xxxx')}};}]);

在控制器中使用它:

app.controller("MainCtrl", ["$scope", "DataService", function($scope, DataService) {$scope.teamDetails = {};$scope.getTeamDetailsById = function(event, teamId) {//防止点击导航event.preventDefault();//调用工厂服务DataService.getTeamDetailsById(teamId).then(function(response) {//成功回调$scope.teamDetails = response.data;}，功能(响应){//发生了错误});}}]);

在 ng-repeat 元素中:

<a href ng-click="getTeamDetailsById($event, team.team_id)">{{team.team_name}}</a>

---

以上假设您只有一种状态并且仅存储在一个控制器中.如果您想使用 $stateProvider 使用不同的状态，那么您必须使用参数，通过使用 ui-sref 并传入团队 ID.

如果您确实在使用 $states 和参数，请执行以下操作:

{{ team.team_name }}</a>$scope.goToState = function(e, teamId) {$state.go("teamDetailsS​​tate", { "teamId": teamId });}

I want to know how to dynamically change an $http call so that the $http request URL differs based on the element that is clicked in an ng-repeat list. But I'm stuck.

---

Currently, I have an ng-repeat set up on my index page:

<div ng-repeat="team in nt.getStandings">
    <a href="#/nation-details/{{team.team_id}}"><h2>{{team.team_name}}</h2></a>
    <p>Team ID = {{team.team_id}}</p>
</div>

The variable getStandings is taken from an API via an $http call. Like so:

In StandingsService

return $http.get(
    'http://api.com/standings/1005?Authorization=xxxx'
) 

        .success(function(data) { 
          return data; 
        }) 
        .error(function(err) { 
          return err; 
        }); 

And then StandingsService is attached to the getStandings variable in my controller.

"1005" is a property which calls a specific array, in this case a particular sporting competition, from an array of competitions.

So, on my index page I'm using ng-repeat to list all teams within that competition.

As you can see on the html above, I have linked each team so that it dynamically generates a URL which appends the team_id to the end, which using $routeParams I define as the variable whichTeam.

Team Details Page

<h1>Dynamic Team ID = {{whichTeam}}</h1>

This works fine, the team ID is generated dynamically according the team that is clicked.

---

Just like 'StandingsService' above, I have another service called 'TeamService' which makes an $http request to pull team data. Currently though it is set up statically to make a call to one individual team - I want to make the service take in the whichTeam variable so that the call changes depending on which team was clicked.

This is the static team $http request (I've broken the URL apart and concatenated to make it clearer):

    return $http.get(
    'http://api.com/team/' + '16110' + '?Authorization=xxxx'
    ) 

I want the 16110 part, which refers to ONE team, to be a the whichTeam variable, allowing it to pull in the correct individual team data, but I don't know how to write this (or indeed if it's possible).

I hope I've been clear - happy to clarify further if needed. Thanks in advance.

解决方案

Make a factory:

app.factory("DataService", ["$http", function($http) {
    return {
        getTeamDetailsById: function(teamId) {
            return $http.get('path/to/api' + teamId + '?Auth=xxxx')
        }
    };
}]);

Use it in a controller:

app.controller("MainCtrl", ["$scope", "DataService", function($scope, DataService) {
    $scope.teamDetails = {};

    $scope.getTeamDetailsById = function(event, teamId) {
        //prevent click navigation
        event.preventDefault();

        //call factory service
        DataService.getTeamDetailsById(teamId).then(function(response) {
            //success callback
            $scope.teamDetails = response.data;
        }, function(response) {
            //an error has occurred
        });
    }
}]);

In the ng-repeat element:

<div ng-repeat="team in teams">
    <a href ng-click="getTeamDetailsById($event, team.team_id)">{{team.team_name}}</a>
</div>

---

The above assumes you have only one state and are storing in only one controller. If you want to use different states usving $stateProvider, then you'd have to use parameters, by making use of ui-sref and passing in team Id.

If indeed you are using $states and parameters, do this:

<a href ng-click="goToState($event, team.team_id)">{{ team.team_name }}</a>

$scope.goToState = function(e, teamId) {
    $state.go("teamDetailsState", { "teamId": teamId });
}

这篇关于设置动态 $http.get 请求(Angular)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！