javascript - 在 ng-repeat 中使用 $http.get 会导致多个错误

Question

我有一个函数，它按组 ID 返回项目数组。这是:

var getChoices = function (groupId) {
    var request = $http.get(_baseUrl + 'choice', { params: { choiceGroupId: groupId } });

    return request.then(function(result) {
        if (resources.ok(result)) {
            return result.data.items;
        }
    }, function(error) {

    });
}

当我将它绑定(bind)到按钮时它工作正常，但是当我尝试对此函数进行 ng-repeat 时，结果我在浏览器控制台中出现多个错误。

<md-list>
    <md-list-item ng-repeat="choice in getChoices(choiceGroupId)">
        {{choice}}
    </md-list-item>
</md-list>

我也尝试过这个，但结果是一样的。

<md-list ng-init="choices = {{getChoices(choiceGroupId)}}">
    <md-list-item ng-repeat="choice in choices">
        {{choice}}
    </md-list-item>
</md-list>

我已经看到了这样的问题的答案，但是有人建议在 Controller 中发出请求，然后用数据填充数组，并迭代数组值，但这不适合我的情况，因为我需要 choiceGroupId 从 UI 端。

浏览器似乎尝试在每个刻度上评估 get 请求，并且发生溢出之类的情况。我该如何处理这个问题，调用“get”一次，然后迭代返回的结果？

Answer 1

检查您的选择变量是否有重复的值，如果是，请尝试下面的代码

<md-list>
    <md-list-item ng-repeat="choice in choices track by $index">
        {{choice}}
    </md-list-item>
</md-list>



var getChoices = function (groupId) {
    var request = $http.get(_baseUrl + 'choice', { params: { choiceGroupId: groupId } });

    return request.then(function(result) {
        if (resources.ok(result)) {
            $scope.choices= result.data.items;
        }
    }, function(error) {

    });
}