ng-repeat обрабатывает массив объектов и subArray

Question

Я использую angularJS с внутренним узлом, который отправляет данные с помощью socketio.Затем я пытаюсь показать данные с помощью ng-repeat.

Мои данные ответа: -

[
 {
   day: 1,
   messages:[
     {msg: 'We have reached a certain level of authenticity'},
     {msg: 'You had a chat with Falon'},
     {msg: 'I have 2 stories to complete'}

   ]
 },
 {
   day: 2,
   messages:[
     {msg: 'We have to add more resources.'},
     {msg: 'You had a chat with Falon and Isha'},
     {msg: 'Story 2 is still incomplete'}

   ]
 },
 {
   day: 3,
   messages:[
     {msg: 'Thanks for having a Chat with Isha.'},
     {msg: 'Conflict Resolution done between Remo and Amit'},
     {msg: 'Story 2 completed. Moving to Story 3'}

   ]
 }
]

Мой код контроллера: -

app.controller('report', function($scope, $timeout, $http) {
  console.log('Reports Page');

$http.get("/reports")
.then(function(response) {
    $scope.ourGrouper = 'today';
    var messages = response.data;
    $scope.contents = messages;
    console.log($scope.contents);
  });
});

Мой HTML-код: -

<div id="accordion" class="accordion-style" ng-controller="report">
  <div class="card" ng-repeat="(key, value) in contents | orderBy: 'day' | unique: 'day'">
    <div class="card-header" id="heading{{$index}}">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">
          Day {{value.today}}
        </button>
      </h5>
    </div>
    <div id="collapse{{$index}}"  class="collapse" ng-class="!$last ? 'class-for-last' : 'show'"  aria-labelledby="heading{{$index}}" data-parent="#accordion">
      <div class="card-body" ng-repeat="(key, value) in contents | groupBy: 'id'">
        {{value}}
      </div>
    </div>
  </div>
</div>

Мой текущий вывод: -

Как вы видите здесь, все результаты объекта присутствуют в каждом дне, 'angular.filter'не очень помогает.

Мой ожидаемый результат в аккордеоне: -

**Day 1**
   We have reached a certain level of authenticity
   You had a chat with Falon
   I have 2 Stories complete

**Day 2**
   We have to add more resources
   You had a chat with Falon and Isha
   Story 2 is still incomplete

**Day 3**
   Thanks for having Chat with Isha.
   Conflict Resolution done between Remo and Amit
   Story 2 completed. Moving to Story 3

Answer 1

Когда вы предоставили данные ответа, когда вы первый цикл используете ngRepeat , ваша клавиша начинается с нуля , а значение будет вашим первым объектом результата .

 {
   day: 1,
   messages:[
     {msg: 'We have reached a certain level of authenticity'},
     {msg: 'You had a chat with Falon'},
     {msg: 'I have 2 stories to complete'}

   ]
 }

Теперь для доступа к значению дня [Пример. день: 1], нужно написать {{value.day}}. А для печати сообщений вам нужно повторить цикл, используя value.messages, чтобы вы могли распечатать каждое сообщение с value.messages.

<div id="accordion" class="accordion-style" ng-controller="report">
      <div class="card" ng-repeat="(key, value) in contents | orderBy: 'value.day' | unique: 'value.day'">
        <div class="card-header" id="heading{{$index}}">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">
              Day {{value.day}}
            </button>
          </h5>
        </div>
        <div id="collapse{{$index}}"  class="collapse" ng-class="!$last ? 'class-for-last' : 'show'"  aria-labelledby="heading{{$index}}" data-parent="#accordion">
          <div class="card-body" ng-repeat="(msg_key, msg_value) in value.messages">
            {{msg_value.msg}}
          </div>
        </div>
      </div>
    </div>