在Angular JS中访问两级分组中的过滤器

时间:2016-08-01 03:44:18

标签: angularjs

我有一个包含两级分组的列表。如何从第一个过滤器访问二级过滤器?

<div ng-repeat="(key1, value1) in list| groupBy: 'group1'">
  <!--i want to access 'filtered' here-->
  {{ key1 }}
  <div ng-repeat="(key2, value2) in value1 | groupBy : 'group2'" ng-show="filtered.length > 0">
    {{ key2 }}
    <div ng-repeat="item in value2 | filter : ...some filters } as filtered">
      <div class="collapse-detail-detail">
        {{ item.Name }}
      </div>
  </div>
</div>

我想访问&#39;过滤&#39;在第一级,因为我希望在过滤后没有任何项目时隐藏整个组。

例如我有这个清单:

[
{name:"Kevin Durant", team: 1, : homeTown: 1}, 
{name:"Dwayne Wade", team: 2, homeTown: 1}, 
{name:"Lebron James", team: 2, homeTown: 2}, 
{name:"Kyrie Irving", team: 2, homeTown: 2},
{name:"Damian Lillard", team: 1, homeTown: 3}
]

按团队和家乡分组将导致

team 1
  homeTown 1
    Kevin Durant
  homeTown 3
    Damian Lillard
team 2
  homeTown 1
    Dwayne Wade
  homeTown 2
    Lebron James
    Kyrie Irving

如果您要过滤所有属于第1组的人,您将获得:

team 1
  homeTown 1
    Kevin Durant
  homeTown 3
    Damian Lillard
team 2
  homeTown 1
  homeTown 2

但我想要的结果是

team 1
  homeTown 1
    Kevin Durant
  homeTown 3
    Damian Lillard

1 个答案:

答案 0 :(得分:1)

试试这个。它的工作原理,您可以使用angular.filter模块对数组进行分组。 angular.filter

&#13;
&#13;
var app = angular.module('plunker', ['angular.filter']);

app.controller('MainCtrl', function($scope) {
$scope.list = [
{name:"Kevin Durant", team: 1,  homeTown: 1}, 
{name:"Dwayne Wade", team: 1, homeTown: 1}, 
{name:"Lebron James", team: 1, homeTown: 2}, 
{name:"Kyrie Irving", team: 1, homeTown: 2},
{name:"Damian Lillard", team: 1, homeTown: 3}
] 
});
&#13;
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.js"></script>
   
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
    <ul ng-repeat="(key, value) in list | groupBy: 'team'">
        Team: {{ key }}
         
       <ul ng-repeat="(key, value) in value | groupBy: 'homeTown'">
         <span>HomeTown: {{ key }}<span>
         <div style="margin-left:10px;"> <span ng-repeat="subValue in value">{{subValue.name}}{{($index < value.length - 1 ? ", " : "")}}</span></div>
    
       </ul> 
      </ul>
  </body>

</html>
&#13;
&#13;
&#13;