Angular ng-repeat 这个 JSON 用户到用户消息传递的结构

Question

非常简单的用户到用户消息传递片段，我正在努力使用应用程序中的界面对项目使用 ng-repeat。

这是数据：

   {
     "ID": 4118,
     "CreatedDate": "2015-08-20T03:12:50.397",
        "recipient": [
         {
           "ID": 13,
           "FirstName": "Heather",
           "LastName": "Martin",
           "ProfileImage": "https://../profilepictures/13"
         }
       ],
 "sender": [
        {
          "ID": 1046,
           "FirstName": "Brad",
           "LastName": "Martin",
           "ProfileImage": "https://../profilepictures/1046"
        }
      ],
  "messages": [
    {
      "ID": 4137,
      "ConversationID": 4118,
      "UserID": 1046,
      "Body": "hey",
      "CreatedDate": "2015-08-20T14:34:42.4716233+00:00"
    }
  ]
}

在controller中我从LS中获取对话，一个对话就是LocalStorage中的一条记录，上面的JSON代表一个对话。

                 $scope.convo = JSON.parse(localStorage.getItem("convo-" + $stateParams.chatId));

这是我试图实现的结构（同样，非常简单，没有什么花哨的）。

  <ul>
        <li class="item-avatar-left" ng-repeat="c in convo track by $index">

            <img ng-src="{{c.recipient[0].ProfileImage}}" />

            <p class="bubble speech">
                {{c.messages[0].Body}}

            </p>

        </li>

    </ul>

我尝试了 ng-repeat 指令的多种变体。

基本上我想要实现的是每条消息只显示一个 <li>。

当前结果：

LS 对话的控制台输出：

Answer 1

您可以通过ng-repeat

正常尝试

在控制器中：

$scope.convo = [
                 {
                      "ID": 4118,
                      "CreatedDate": '2015-08-20T03:12:50.397',
                      //...... as your info
                 }
               ];

在HTML中：

    <ul>
     <li class="item-avatar-left" ng-repeat="c in convo">

       <img ng-src="{{c.recipient[0].ProfileImage}}" />

       <p class="bubble speech" ng-repeat="m in c.messages">
                            {{m.Body}}

              </p>

      </li>
  </ul>

注意： 你的 $scope.convo 需要是一个数组

Angular ng-repeat 这个 JSON 用户到用户消息传递的结构

Angular ng-repeat this JSON structure for user to user messaging

javascript

arrays

json

angularjs

ng-repeat