Angular:如何过滤嵌套的ng-repeat

时间:2017-06-09 14:07:03

标签: angularjs nested angularjs-ng-repeat

我有这个网站{{3}}

目前,数据存储在这样的一个数组中(这很好):

$scope.data = [
      {
        category: 'FundRacers',
        title: 'FundRacers Events',
        link: 'https://www.facebook.com/FundRacersDK/',
        order: '1000',
        children: [
         { category: "FundRacers", event: "FundRacers Påsketrænning", year: "2017-04-14", fotograf: "Nikolaj Borup", link: "https://www.facebook.com/media/set/?set=a.1930098447223523.1073741963.1543490649217640&type=1&l=dce31258df", link2: "" }
        , { category: "FundRacers", event: "FundRacers GetFitGym Event", year: "2016-12-10", fotograf: "Lena Toft Pedersen og Filip Rasmussen", link: "https://www.facebook.com/media/set/?set=a.1867935790106456.1073741957.1543490649217640&type=1&l=db17b724a0", link2: "" }
        ]
      },
      {
        category: 'Evolution Race',
        title: 'Evolution Race',
        link: 'https://www.facebook.com/evolutionrace/',
        order: '1100',
        children: [
         { category: "Evolution Race", event: "Sky", year: "2017-06-04", fotograf: "Jens Petersen", link: "https://www.facebook.com/media/set/?set=a.10155273811362660.1073741862.290365527659&type=1&l=e4df786a18", link2: "" }
        , { category: "Evolution Race", event: "Sky", year: "2017-06-04", fotograf: "Tommy Jensen", link: "https://www.facebook.com/media/set/?set=a.1953270791572955.1073741972.1543490649217640&type=1&l=04c3a9e905", link2: "" }
        ]
      },
      }
      ];

我想将数据更改为包含在两个数组中,一个包含类别,另一个包含链接。但是当我这样做时,我无法让嵌套的ng-repeat过滤器正常工作。

第一个ng-repeat看起来像这样

<li class="list-group-item" ng-repeat="item in data | orderBy:'order'">

第二个看起来像这样:

<li class="list-group-item" ng-repeat="child in item.children | filter:searchText  | orderBy:'-year'"><a href="{{child.link }}" target="_blank">{{ child.year }} - {{ child.event }} - Fotograf {{ child.fotograf }}</a></li>

如果我改变这样的数据

      $scope.category = [
      { category: 'FundRacers', title: 'FundRacers Events',link: 'https://www.facebook.com/FundRacersDK/', order: '1000'} }
      ];


      $scope.links = [
      { category: "FundRacers", event: "FundRacers Påsketrænning", year: "2017-04-14", fotograf: "Nikolaj Borup", link: "https://www.facebook.com/media/set/?set=a.1930098447223523.1073741963.1543490649217640&type=1&l=dce31258df", link2: "" }
      ];

我应该如何更改我的两次ng-repeat以得到相同的结果?

我尝试了几种不同版本的嵌套ng-repeat

<li class="list-group-item" ng-repeat="cat in category | orderBy:'order'">

<li class="list-group-item" ng-repeat="link in links | filter:cat.category"></li>

<li class="list-group-item" ng-repeat="link in links | filter:{{cat.category}}"></li>

<li class="list-group-item" ng-repeat="link in links | filter:'cat.category'"></li>

到目前为止没有任何工作。要么我得到每个类别的整个列表,要么我什么也得不到。

1 个答案:

答案 0 :(得分:0)

自己找到它。愚蠢的错字。

这有效

vertical