利用JSON数据进行排序和筛选的AngularJS示例

  • MatchDate: 'Localtime'
  • MatchNumber: 'Match64'
  • GroupName: 'Final'
  • Stadium: 'Maracanã-EstádioJornalistaMárioFilho'
  • Venue: 'RioDeJaneiro'
  • TeamName1: 'W61'
  • TeamCode1: 'W61'
  • TeamName2: 'W62'
  • TeamCode2: 'W62'

感谢Fifa.com提供的信息。从FIFA.com的数据中创建了这个JSON(希望他们不会介意)。

在这次演示中,增加了两个额外的功能,即排序筛选

首先,使用排序表达式。在ng-repeat中使用了排序表达式。使用matchDate和排序表达式对其进行了排序,如下图所示:

{{ match.MatchDate }} - {{ match.TeamName1 }} vs {{ match.TeamName2 }}

当运行它时,结果将按照MatchDate排序

现在,如果想按逆日期顺序排序,那也非常简单。只需要在MatchDate前面加上“-”负号。一旦这样做了,将得到以下输出。

现在对某些特定信息感兴趣,比如特定组、特定比赛和特定团队,所以在这种情况下需要筛选扩展属性。

在当前示例中,使用了一个具有ng-model属性的文本框。现在这个ng-model的值是在ng-repeat中使用filter选项传递的,如下图所示。

{{ match.MatchDate }} - {{ match.TeamName1 }} vs {{ match.TeamName2 }}

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485