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

【问题标题】：How do I call another function within ng-repeat in Angular如何在 Angular 的 ng-repeat 中调用另一个函数
【发布时间】：2016-12-21 04:40:40
【问题描述】：

我确信这个问题之前已经被问过，但我无法看到或找到它的最佳解释，因此我想重新提出相同的问题并打开线程以获得更清晰的答案并提供一些示例。

我的目标是显示团队及其排名，注意：为了显示排名，我有一个单独的函数，可以根据他们在 db 中的 score 字段获取团队的排名。

我在 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 中返回值的函数。

【问题讨论】：

当然，在ngRepeat 中提出一个$http request 确实是一种不好的做法。我也怀疑你没有收到像infinite digest 这样的错误或类似的东西..
@developer033，我完全同意你的看法，但我没有选择这样做，你能告诉我处理这种情况的其他方法或最佳方法是什么吗？
非常感谢您在这方面的帮助，因为了解如何处理这个问题对我来说非常重要。如果您能用一些例子来解释它，那就更好了。
您必须更改您的back-end 中的响应，加入表格等等.. 都应该来自后端。
@developer033，我没有单独的表格来存储团队的排名，我只有一个名为“score”的字段，但我有一个函数可以找到每个团队的排名像这样：rankingTeam($teamId) 返回排名号。我不太确定如何将其附加到此： public function findAllTeamsInClass($classId) { return Team::where('class_id', '=', $classId)->with('role', 'business') ->获取（）； }

标签： javascript angularjs

【解决方案1】：

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

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。

【讨论】：

我做了同样的事情，只是从后端完成了......我会接受这是正确的:)

【解决方案2】：

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

你可以像普通的一样在 ng-repeat 中调用一个函数。

【讨论】：

我之前试过，一切正常。你能告诉我这个案子不起作用吗？