如何在Angular中调用ng-repeat中的另一个函数

时间:2016-08-14 22:35:58

标签: javascript angularjs

我确信之前已经提出过这个问题,但是我无法看到或找到最佳解释,因此我想重新提出同样的问题,并通过一些例子打开线索以获得更清晰的答案。

我的目标是展示团队及其排名,请注意:为了显示排名,我有一个单独的功能,根据他们在db中的得分字段获得团队排名。

我在TeamController中有两个函数,如下所示:

        tm.showAllByClass = function (classId) {
            TeamService.showAllByClass(classId).then(function (response) {
                tm.teamsInClass = response.data;
            }).catch(function (error) {
                $scope.result = error;
            });
        };

        tm.ranking = function (classId, teamId) {
            TeamService.ranking(classId, teamId).then(function (response) {
                return response.data;
            }).catch(function (error) {
                $scope.result = error;
            });
        };

        <tr ng-repeat="tm in team.teamsInClass.data">
                <td>{{tm.group_number}}</td>
                <td>{{tm.role.name}}</td>
                <td>{{tm.ranking(tm.class_id, tm.id)}}</td>
                <td>{{tm.amount | currency}}</td>
        </tr>

这是后端部分中的所有团队的功能:

public function findAllTeamsInClass($classId)
{
    return Team::where('class_id', '=', $classId)->with('role', 'business')->get();
}

// return rank of team
public function teamRanking($classId, $teamId){
    return 3; // for sake of simplicity I just return a static value
}

有什么方法可以将teamRanking函数直接附加到团队合作关系或其他什么?

由于某种原因,tm.ranking()没有返回任何内容,如何调用在ng-repeat中返回值的函数。

2 个答案:

答案 0 :(得分:0)

你可能在这里有相同的答案: https://stackoverflow.com/a/26400951/6715875

你可以简单地在ng-repeat中调用一个与普通函数相同的函数。

答案 1 :(得分:0)

由于个别排名的获取是异步的,因此这些操作需要从团队列表的获取中链接

team.showAllByClass = function (classId) {
    TeamService.showAllByClass(classId).then(function (response) {
        team.teamsInClass = response.data;
        //return for chaining
        return team.teamsInClass;
    }).then(function(teamsInClass) {
        promiseArray = [];
        for (var iTeam=0; iTeam<teamsInClass.length; iTeam++) {
            //IIFE
            (function (iTeam) {
                var iPromise = TeamService.ranking(classId, iTeam.id);
                iPromise = iPromise.then(function(response) {
                     var ranking = response.data;
                     team.teamsInClass[iTeam].ranking = ranking;
                     return ranking;
                });
                promiseArray.push(iPromise);
            })(iTeam);
            //end IIFE
        };
        //return for chaining
        return $q.all(promiseArray);
    }).then(function(rankingArray) {
        console.log("All rankings fetched");        
    }).catch(function (error) {
        $scope.result = error;
    });
};

上面的示例获取团队列表,然后创建一个承诺列表,将每个排名附加到每个团队。它使用$q.all 承诺列表。

HTML

    <tr ng-repeat="tm in team.teamsInClass">
            <td>{{tm.group_number}}</td>
            <td>{{tm.role.name}}</td>
            <td>{{tm.ranking || 'PENDING' }}</td>
            <td>{{tm.amount | currency}}</td>
    </tr>

在从API检索数据之前,排名将显示为PENDING