1

我是一名学生，正在为我的项目学习 angularJS。如有任何愚蠢的问题，请多多包涵。

我正在尝试使用 ng-repeat [myChallenge in ListChallengesICreated.challenge] 来迭代一系列挑战。同时，每个挑战，我都试图调用另一个函数来传递一个徽章 id 数组，它返回一个徽章 URL 的数组属于那个特定的挑战。我还需要使用 ng-repeat 遍历那个徽章 URL [filtered_badges 中的徽章] 以及在每个挑战中显示徽章。

但是第二个 ng-repeat 仅在第一个 ng-repeat 完成后运行。因此，所有挑战都显示相同的徽章图片，而不是各自的徽章。有没有办法在第一次执行时同时运行第二个 ng-repeat？

HTML 代码：

<table class="table table-condensed" style="border-style:solid; border-color:blue;width:100%" ng-init="list_challenges_I_created();">
    <tr **ng-repeat="myChallenge in ListChallengesICreated.challenges" ** ng-init="get_badge(myChallenge.unlockRequiredBadges)">
        <td class="cMName">{{myChallenge.name}}</td>
        <td class="cMLocation" **ng-repeat="badge in filtered_badges" **>
            <input type="image" ng-src="{{badge.imageURL}}" />
        </td>
        <td class="cMSDate">{{myChallenge.startDate}}</td>
        <td class="cMEDate">{{myChallenge.endDate}}</td>
        <td class="cMReview">
            <div class="btn-group">
                <button class="btn btn-warning" a data-target="#statsModal" role="button" data-toggle="modal">Stats</button>
                <button class="btn btn-danger" a data-target="#tab2create">Edit</button>
            </div>
        </td>
        <td class="cMPublish">nmfv</td>
        <td class="cMShare">nmfnvm</td>
    </tr>
</table>

JS 文件（返回徽章）

$scope.get_badge = function (allRequiredBadges) {
    var path_badges = [];
    var get_all_badges = {};
    var all_badges = {};
    var all_badges_URL = [];
    $scope.filtered_badges = {};
    path_badges = allRequiredBadges;

    get_all_badges = $resource('/jsonapi/all_badges');
    get_all_badges.get({}, function (response) {
        all_badges = response;

        for (var j = 0; j < path_badges.length; j++) {
            for (var i = 0; i < all_badges.badges.length; i++) {
                if (all_badges.badges[i].id == path_badges[j]) {
                    all_badges_URL.push(all_badges.badges[i]);
                }
            }
        }
        $scope.filtered_badges = all_badges_URL;
    })
}
4

1 回答 1

1

实际上问题不在于 ng-repeat 指令，而在于不正确的范围使用。我认为您的 $scope.get_badge 函数是在控制器中定义的，并且在那里使用的 $scope 是控制器的范围。因此，当 get_badge 要求 2 个挑战时，这行：

$scope.filtered_badges = all_badges_URL;

覆盖之前加载的徽章，这就是为什么您在所有挑战中都获得相同的徽章。最简单的解决方案是在挑战对象中收集徽章，如下所示：

在 JavaScript 中：

myChallenge.filtered_badges = ...

在 html 中：

<tr ng-repeat="myChallenge in ListChallengesICreated.challenges" ng-init="get_badge(myChallenge)">
   <td class="cMLocation" ng-repeat="badge in myChallenge.filtered_badges" >
       <input type="image" ng-src="{{badge.imageURL}}" />
   </td>
于 2014-01-25T09:45:10.173 回答