本文介绍了设置动态$ http.get请求(角)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想知道,这样的$ HTTP请求的URL不同的基于点击在NG-重复列表中的元素如何动态地更改$ HTTP调用。但我卡住了。

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.

目前,我有一个NG重复设置我的索引页:

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>

变量 getStandings 是从API通过$ HTTP调用拍摄。像这样:

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

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

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

然后StandingsService连接到 getStandings 变量在我的控制器。

1005,是它要求一个特定的阵列,在这种情况下,一个特定的体育比赛中,从比赛的阵列的属性

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

所以,我使用的是NG-重复列出竞争中的所有团队我的索引页上。

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

正如你可以在HTML上面,我已经联系各队看到,这样它会动态生成该追加的URL TEAM_ID 来结束,这使用 $ routeParams 我定义为变量 whichTeam

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.

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

这工作得很好,是按照点击,球队动态生成的球队ID。

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

就像上​​面的'StandingsService',我有一个名为TeamService其它服务,这使得一个$ http请求拉队的数据。目前,虽然它被设置静态地拨打电话,以一个人的团队 - 我想在该whichTeam变量服务要花那么呼叫变化,这取决于被点击的团队

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.

这是静态的团队$ HTTP请求(我除了打破了URL,然后连接起来,以使其更清晰):

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'
    )

我要的 16110 部分,它指的是一个团队,是一个在 whichTeam 变量,允许它拉在正确的各个团队的数据,但我不知道如何写这个(或实际上如果可能的话)。

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.

推荐答案

请工厂:

app.factory("DataService", ["$http", function($http) {
    return {
        getTeamDetailsById: function(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) {
        //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
        });
    }
}]);

NG-重复元素:

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


以上假设你只有一个状态,并存储只有一个控制器。如果你要使用不同的状态usving $ stateProvider ,那么你就必须使用参数,通过使用的UI-SREF 并传递团队ID。


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请求(角)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 17:57