我有以下数据库:
{
"games" : [ {
"event" : [ "Event 1", "Event 2", "Event 3" ],
"name" : "Game 1"
}, {
"event" : [ "Event 1", "Event 2", "Event 3" ],
"name" : "Game 2"
} ]
}
我试图弄清楚如何使用 angularjs 的属性循环遍历特定游戏的所有事件。下面是一个例子:
在这里,我遍历所有游戏并打印出每个游戏的按钮。然后,如果您单击按钮,它会使游戏变得活跃:
<div class="row">
<div class="col-xs-12 col-md-4 noPadding" ng-repeat="game in data.games">
<div class="form-group">
<button
type="button"
class="btn largeButton"
ng-class="{'btn-success':game==data.game,'btn-danger':gameType!=data.game}"
ng-click="data.child('game').set(game);">
{{game}}
</button>
</div>
</div>
</div>
现在接下来我需要遍历所有事件并打印出该游戏的按钮,但我不确定如何通过属性完成此操作。
<div ng-repeat="event in data.games.where(game:game.name == 'Game 1').events">
我上面写的可能吗?
我对 angularjs 比较陌生。我正在考虑使用,| filter
但似乎无法弄清楚如何进行表达。
诀窍是在game
第一个循环中的元素上循环并使用game.event
点表示法访问数组。ng-if 语句可以检查当前数组元素(game.event[i])
是否是您当前的游戏。如果那个 ng-if 语句失败,第一个 div 之后的所有 AngularJS 代码都不会执行,也不会制作任何按钮。
我使用currentGame
来避免变量名称冲突作为 $scope 变量来存储当前选定游戏的名称:大概在用户选择要玩的游戏时在 data.child('game').set(game) 函数中设置在您之前提供的代码中。
<div class="col-xs-12 col-md-4 noPadding"
ng-repeat="game in data.games"
ng-if="currentGame = game.name">
<div ng-repeat="eventElement in game.event">
<button id="{{eventElement}}-button"
class='btn primary'
ng-click="startGame(eventElement)">{{eventElement}}</button>
</div>
</div>
希望这能回答您的问题并且有意义。:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句