Question

在角度，如果我有一个对象，如：

[{
  id : 1, 
  subject : BIO, 
  class : '101' , 
  time : 'mon'
 },
 {
  id : 2, 
  subject : BIO, 
  class : '101', 
  time : 'tues' 
 },
 { 
  id : 3, 
  subject : MTH, 
  class : '101-00', 
  time : 'wed'
 },
 {
  id : 4, 
  subject : MTH, 
  class : '101',
  time : 'tues'
 },
 {
  id : 5, 
  subject : BIO, 
  class : '102', 
  time : 'sat' 
 },

我想在每个主题标题下面显示所有结果，是否有我可以使用的指令或我需要的东西？

是否可以按类别基于键值对进行输出？

所以我的输出将是

BIO

所有班级编号和时间。

MTH

所有数学课程。

Answer 1

您可以使用角度过滤器库中的“groupBy”过滤器，它可以完全满足您的需求： https://github.com/a8m/angular-filter#groupby

Answer 2

最简单的方法是使用filter而不是ng-repeat。如下所示：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.classes = [{
    id: 1,
    subject: 'BIO',
    class: '101',
    time: 'mon'
  }, {
    id: 2,
    subject: 'BIO',
    class: '101',
    time: 'tues'
  }, {
    id: 3,
    subject: 'MTH',
    class: '101-00',
    time: 'wed'
  }, {
    id: 4,
    subject: 'MTH',
    class: '101',
    time: 'tues'
  }, {
    id: 5,
    subject: 'BIO',
    class: '102',
    time: 'sat'
  }, ]
});

<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  BIO:
  <div ng-repeat="class in classes | filter: 'BIO'">
    {{class.subject}} {{class.class}} {{class.time}}
  </div>
  <hr> MTH:
  <div ng-repeat="class in classes | filter: 'MTH'">
    {{class.subject}} {{class.class}} {{class.time}}
  </div>
  <hr> ALL:
  <div ng-repeat="class in classes">
    {{class.subject}} {{class.class}} {{class.time}}
  </div>
</body>

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

我添加了groupBy过滤器以显示差异，来自@DmitryVasiliev的答案

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

如何根据angularjs中的对象键进行显示

BIO

MTH

2 个答案: