我有以下数据库:
{
"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
,但我似乎无法弄清楚如何表达。
答案 0 :(得分:1)
诀窍是循环第一个循环中的game
元素并使用点表示法访问game.event
数组。 ng-if语句可以检查当前数组元素(game.event[i])
是否是您当前的游戏。如果该ng-if语句失败,则第一个div之后的所有AngularJS代码都将不会执行,并且不会生成任何按钮。
我正在使用currentGame
来避免变量名称冲突,因为$ scope变量存储了当前所选游戏的名称:可能设置在data.child('game')。set(game)function当用户选择要在您之前提供的代码中播放的游戏时。
<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>
希望这能回答你的问题并且有意义。 :)