ng-repeat处理对象和subArray的数组

Question

我正在使用angularJS和一个使用socketio发送数据的节点后端。然后我尝试使用ng-repeat显示数据。

我的回复数据： -

public class M3DatePickerDialog extends DialogFragment {

    private DatePicker mDatePicker;
    private OnDatePickerInteractionListener mListener;

    public static M3DatePickerDialog newInstance() {
        return new M3DatePickerDialog();
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.dialog_m3_date_picker, container, false);

        mDatePicker = (DatePicker) rootView.findViewById(R.id.datePicker);
        mDatePicker.setDescendantFocusability(android.widget.DatePicker.FOCUS_BLOCK_DESCENDANTS);
        mDatePicker.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                return true;
            }
        });

        Button setDate = (Button) rootView.findViewById(R.id.datePickerSet);
        setDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.onDateChanged(mDatePicker.getYear(), mDatePicker.getMonth() + 1, mDatePicker.getDayOfMonth());
                }
                getDialog().dismiss();
            }
        });

        return rootView;
    }

    @Override
    public void onResume() {
        super.onResume();
        if (this.getDialog().getWindow() != null) {
            this.getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        }
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        mListener = null;
    }

    public void registerListener(OnDatePickerInteractionListener onDatePickerInteractionListener) {
        mListener = onDatePickerInteractionListener;
    }

    public interface OnDatePickerInteractionListener {
        void onDateChanged(int year, int monthOfYear, int dayOfMonth);
    }
}

我的控制器代码： -

[
 {
   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'}

   ]
 }
]

我的HTML代码： -

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);
  });
});

我当前的输出： -

正如你在这里看到的那样，所有对象结果都存在于每一天，'angular.filter'没有多大帮助。

我在Accian中的预期输出： -

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

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'}

   ]
 }

现在可以访问日期值[Ex。日：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>