[英]Nested ng-repeat in angularJS doesn't work
I am a student and learning angularJS for my project. 我是一名学生,正在为我的项目学习angularJS。 Please bear with me for any silly questions. 如有任何愚蠢的问题,请与我联系。
I am trying to iterate through an array of challenges using ng-repeat[myChallenge in ListChallengesICreated.challenges]. 我正在尝试使用ng-repeat [ListChallengesICreated.challenges中的myChallenge]遍历一系列挑战。 In the mean time, each challenges, I am trying to call another function to pass an array of badge id, which return an array of badges URL's belongs to a that specific challenge.I also need to iterate through that badges URL's using ng-repeat[badge in filtered_badges] as well to display badges along each challenges. 同时,每次挑战时,我都试图调用另一个函数来传递一个徽章ID数组,该ID返回一个徽章URL数组,它属于那个特定挑战。我还需要使用ng-repeat遍历徽章URL [filtered_badges中的徽章]以及在每个挑战中显示徽章。
But second ng-repeat only run after first ng-repeat is completed. 但是第二个ng-repeat仅在第一个ng-repeat完成后运行。 So all the challenges display same badges pictures instead of it respective badges. 因此,所有挑战均显示相同的徽章图片,而不是相应的徽章。 Is there a way to run second ng-repeat concurrently while first being executed? 有没有办法在第一次执行时同时运行第二个ng-repeat?
HTML code: 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 File (which returns badges) 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;
})
}
Actually the problem is not in ng-repeat directive but in incorrect scope usage. 实际上,问题不在于ng-repeat指令,而在于错误的作用域用法。 I think your $scope.get_badge function is defined in the controller and $scope used there is the controller's scope. 我认为您的$ scope.get_badge函数是在控制器中定义的,并且使用的$ scope是控制器的作用域。 So when get_badge called for 2 challenges then this line: 因此,当get_badge提出2个挑战时,请执行以下操作:
$scope.filtered_badges = all_badges_URL;
overwrites the previouly loaded badges, that's why you get the same badges for all challenges. 覆盖先前加载的徽章,这就是为什么您在所有挑战中都得到相同的徽章的原因。 The simplest solution is to but badges collection inside challenge object, like this: 最简单的解决方案是在挑战对象内部添加徽章,如下所示:
In javascript: 在javascript中:
myChallenge.filtered_badges = ...
In html: 在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.