Question

我正在创建一个类似于“Whatsapp”的简单消息列表。我想包括今天，昨天等的小模糊。

JSON格式：

   {
      "id":"2",
      "chat_id":"2",
      "msg":"sample message 1",
      "timestamp":1404803173
   }

HTML：

<ul>
    <li class="time"><span>Today/Yesterday/2DaysAgo</span></li>
    <li ng-repeat="result in results">{{result.msg}}<small>{{result.timestamp*1000 | date:'medium'}}</small></li>
</ul>

我想在当天只显示第一个<li>（class="time"）（不是针对所有消息）。有没有更好的方法可以做到这一点？

Answer 1

你有服务器端吗？如果是，最好的方法是：

在每个新的一天首次加载时显示“时间”。

在加载li后，将服务器端的标志设置为“true”

每晚00:00（或每天早上首次加载时）将标志设置为false。

检查每次加载是否已将该标志设置为当天。

不确定这是否可以完全来自客户端。一个值得展示的方法是每天在LocalStorage中设置一次标志（可能附加日期？）并在每次加载时检查此标志..

Answer 2

恕我直言，最好的方法是按时间对消息进行排序，然后按天分割，输出重复天数和消息天数，其他方法可能真的过于复杂，不值得花时间

Answer 3

考虑到这个JSON来自服务，它是一个数组：

var json=[
    {
              "id":"1",
              "chat_id":"2",
              "msg":"sample message 1",
              "timestamp":1404803173
    },
    {
              "id":"2",
              "chat_id":"2",
              "msg":"sample message 2",
              "timestamp":1404803174
    },
...]

然后您可以在控制器上创建一个新对象，循环遍历JSON中的项目并为所有日期添加唯一键值，因此您可以对其进行过滤，例如：没有＆＃34; /＆＃34;

$scope.json = Service.json;

$scope.dates = [];
$scope.messages = [];
for(i=0; i<$scope.json.length; i++){
    var d = new Date($scope.json[i].timestamp*1000);
    var index = String(d.getDate()) + String((d.getMonth()+1)) + String(d.getFullYear());
    var obj = {id: index, data: $scope.json[i]};
    $scope.messages.push(obj);
    if($scope.dates.indexOf(index) == -1) $scope.dates.push(index);
}

然后，在你看来：

<ul ng-repeat="date in dates">
    <li class="time"><span>{{date | someFilterToGetDayFromDate}}</span></li>
    <li ng-repeat="message in messages | filter:{'id':  date}:true">{{message.msg}}<small>{{message.timestamp*1000 | date:'medium'}}</small></li>
</ul>

我没有测试代码，但希望你能知道在这里做什么。如果不清楚，请告诉我，我会尝试进一步解释。

AngularJS：根据时间戳添加元素

3 个答案: