AngularJS ng-repeat不使用角度滤波器

时间:2018-02-14 22:22:59

标签: angularjs

我有以下json对象,我想在不使用角度过滤器的情况下在表格中显示它们。我需要根据id进行分组。

/*Output should be like:
1
  Class1
  Class2
2
  Class5*/

  $scope.classes = [
    {
	id: "1",
	name: "class1"
    },
    {
	id: "1",
	name: "class2"
    },
    {
      id: "2",
    	name: "class5"
    }
];
<tr ng-repeat="(key, value) in classes | groupBy: 'id'">
                            <td>
                                {{key.id}}
                            </td>
                            <td>
                                <div ng-repeat=“class in value”>
                                    {{class.name}}
                                </div>
                            </td>
                          </tr>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
angular.module('app', []).controller('ctrl', function($scope) {
  $scope.classes = [
    { id: "1", name: "class1" },
    { id: "1", name: "class2" },
    { id: "2", name: "class5" }
  ];
})
&#13;
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <thead>
    <tr>
      <td>id</td>
      <td>names</td>
    <tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in classes | orderBy : 'id'" ng-if='$first || classes[$index - 1].id != item.id'>
      <td>{{item.id}}</td>
      <td>            
        <div ng-repeat="temp in classes | filter : {id: item.id} : strict">
          {{temp.name}}
        </div>
      </td>
    </tr>
    <tbody>
</table>
&#13;
&#13;
&#13;