javascript - 如何使用 angular-filter 库实现二级分组？

Question

#Permission Category: Code
  Permission: Add Role: Developer
  Permission: Edit Role: Developer
  Permission: Delete Role: Developer
  Permission: Delete Role: Project Lead
#Permission Category: Project
  Permission: Add Role: Admin
  Permission: Edit Role: Project Manager
  Permission: Delete Role: Project Manager
  Permission: Delete Role: Product Owner
#Permission Category: Testing
  Permission: Add Role: Tester
  Permission: Edit Role: Tester
  Permission: Edit Role: Test Lead
  Permission: Delete Role: Test Lead

在上面的 JSON 结构中，我有来 self 的 REST 源的重复列表。例如:

  Permission: Delete Role: Developer
  Permission: Delete Role: Project Lead

  Permission: Edit Role: Tester
  Permission: Edit Role: Test Lead

相反，我希望它在 UI 中显示为:

  Permission: Delete Role: Developer
                     Role: Project Lead

  Permission: Edit Role: Tester
                   Role: Test Lead

我应该如何使用 Angular-Filter 实现这一点？

请在此处找到 JSBin URL: http://jsbin.com/helanefegu/1/edit?html,js,output

我想实现类似于这里的东西:https://coyotecrk.files.wordpress.com/2011/10/blog2-jira-3.png

Answer 1

希望对您有所帮助:

  Permission Category: {{ key }}
  <li ng-repeat="(name, roles) in value | groupBy: 'name'">
        Permission: {{ name }}
    Role: <span ng-repeat="role in roles" ng-bind="role.role"></span>
  </li>