我是一名学生,正在为我的项目学习angularJS。任何愚蠢的问题请耐心回答。
我正试图使用ng-reeat[myChalllengesinListChallengesICreated.challenges]迭代一系列挑战。同时,每次挑战,我都试图调用另一个函数来传递一个徽章id数组,该数组返回属于该特定挑战的徽章URL数组。我还需要使用ng repeat[Backage in filtered_badges]迭代徽章URL,并在每个挑战中显示徽章。
但第二次ng重复只在第一次ng重复完成后运行。因此,所有的挑战都显示相同的徽章图片,而不是各自的徽章。有没有一种方法可以在执行第一个时同时运行第二个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;
})
}
实际上问题不在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>