javascript - Angular Js ng-repeat 遍历 JSON

Question

我是stackoverflow的新手，请指正我的错误。

以下是我的 JSON:

newTodo = {
            title: "task 1",
            cat: "category 1",
        };

同理

newTodo = {
            title: "task 2",
            cat: "category 1",
        }; 


        newTodo = {
            title: "task 3",
            cat: "category 3",
        };

现在在我的 HTML 中，我应该如何编写如下代码:

<li ng-repeat="todo in todos">

            {{todo.title}}
            {{todo.cat}}

</li>

但上面是错误的，我希望任务按类别显示如下:

类别1:任务列表 第二类:任务列表

请帮忙。如果问题不清楚，请告诉我。

Answer 1

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.todos = [{
    "title": "Task1",
    "cat": "Cat1"
  }, {
    "title": "Task2",
    "cat": "Cat1"
  }, {
    "title": "Task1",
    "cat": "Cat2"
  }];

  var reduced = {};

  $scope.todos.map(function(item) {
    reduced[item.cat] = reduced[item.cat] || [];
    reduced[item.cat].push(item.title);
  });

  $scope.reducedOutput = reduced;
});

li{
 color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 
  <ul ng-repeat="(key, value) in reducedOutput">
    {{key}}
    <li ng-repeat="title in value">{{title}}</li>
  </ul>

</div>