javascript - 在 Angular JS 中通过映射键进行过滤

标签 javascript angularjs

考虑以下 JSON 结构: 更新:

[
    {
        "game0001": {
            "-JfuVKIsUBH27DMJfWmL": {
                "action": "STARTFIRSTHALF",
                "team": "HOME"
            },
            "-JfuVLJGMgclLZ0Maduh": {
                "action": "GOAL",
                "team": "AWAY"
            }
        },
        "$id": "events",
        "$priority": null
    },
    {
        "game0001": {
            "gameRunning": false,
            "startDate": "17/01/2015 17:27:42 PM"
        },
        "game0002": {
            "gameRunning": true,
            "startDate": "17/01/2015 19:45:59 PM"
        },
        "game0003": {
            "gameRunning": false,
            "scheduledDate": "17/01/2014 12:30:00 PM"
        },
        "$id": "games",
        "$priority": null
    }
]

如何在 HTML 中实现 AngularJS 的过滤? 从一个非常基本的方式来看,我想要实现的目标如下:

<div ng-repeat="game in games">
  <div ng-repeat="event in events | filter:game">
    {{event.name}} - {{game.name}}
  </div>
</div>

我有 2 个 map 游戏事件,它们共享相同的键,例如(game0001、game0002)

在重复游戏时,我希望有一个内部事件转发器,并仅过滤共享相同 key /ID 的事件。

最佳答案

这是一个有效的 plunkr,我对您想要获取的数据做了假设:

http://plnkr.co/edit/DVwQaRZeZiagGEzY4lCy?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.games = {
    "games": {
      "game0001": {
        "first": "a",
        "second": "b"
      },
      "game0002": {
        "first": "c",
        "second": "d"
      }
    }
  }
  $scope.gamesKeys = Object.keys($scope.games['games']);

  $scope.events = {
    "events": {
      "game0001": {
        "event": {
          "key": "a"
        },
        "event": {
          "key": "b"
        },
        "event": {
          "key": "c"
        }
      },
      "game0002": {
        "event": {
          "key": "a"
        },
        "event": {
          "key": "b"
        },
        "event": {
          "key": "c"
        }
      }
    }
  }
  $scope.eventsKeys = Object.keys($scope.events['events']);
});

重要的部分是这里的 ng-repeat:

  <body ng-controller="MainCtrl">
    <div ng-repeat="gameKey in gamesKeys">

      <div ng-repeat="eventKey in eventsKeys">
        event: {{events['events'][eventKey].event.key}} - game: {{games['games'][gameKey].first}}
      </div>
    </div>
  </body>

关于javascript - 在 Angular JS 中通过映射键进行过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28006511/

相关文章:

javascript - 使用表中的 jquery 填充选择选项按钮

javascript - 有没有办法通过javascript找出Chrome的媒体设置环境?

javascript - 如何将 JSON 数组添加到 javascript 中的每个 JSON 对象?

arrays - 使用angular js根据第一个选择的选项过滤第二个选择框

Javascript 数据格式,这是 JSON 吗?

javascript - 选择数组中开始日期和结束日期之间的数据

javascript - 从多对象 req.body 更新数组中的多个对象

angularjs - 作为 Maven 构建过程的一部分运行 Protractor 测试

javascript - Promise & Recursion,如何在没有回调的情况下处理找到的项目?

脚本 : Line is executing even after return false