循环遍历特定记录的值列表

时间:2017-07-14 20:15:51

标签: angularjs

我有以下数据库:

{
  "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,但我似乎无法弄清楚如何表达。

1 个答案:

答案 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>

希望这能回答你的问题并且有意义。 :)