时间戳

首页 > 解决方案 > ng-repeat 处理对象数组和子数组

javascript - ng-repeat 处理对象数组和子数组

问题描述

我将 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

标签： javascriptangularjs

解决方案

当您提供响应数据时，当您第一次使用 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'}

   ]
 }

现在访问一天的价值[例如。day: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>

推荐阅读