Question

我正在开发一个有角度的应用程序。在这里，我需要以用户时间线的日期顺序显示数据

JS：

  $scope.comments =  [{"_id":"535e912cc6b93c7b30479454",
                       "created_at":"2014-04-28 23:04:36",
                       "post_id":"535e912cc6b93c7b30479453",
                       "type":"story",
                       "story":"[{"_id":"535e912cc6b93c7b30479454",
                                 "title":"test story",
                                 "content":"this is my story...",
                                 "created_at":2014-04-30 22:04:36"}]",
                        "article":"[]"
                       },
                      {"_id":"535e912cc6b93c7b30479454",
                       "created_at":"2014-04-25 23:04:36",
                        "post_id":"535e912cc6b93c7b30479453",
                       "type":"article"
                        "article":"[{"_id":"535e912cc6b93c7b30479454",
                                 "title":"test article",
                                 "content":"this is my article...",
                                 "created_at":2014-04-30 22:04:36"}]",
                        "story":"[]"
                         },----
                       //so on  
                        ]

查看：

  <div ng-repeat = "data in comments">
    <div class="time">
      <span>{{data.created_at | DateFiltertoIso | date:'MMM-dd-yy'}}
    <div> 
     <div ng-switch-on="data.type">
       <div ng-switch-when="story">
        //switch layout adn get further story data by post_id
       </div>
   </div> 
    <div ng-switch-on="data.type">
      <div ng-switch-when="article">
       //switch layout adn get further article data by post_id
       </div>
   </div>
  </div>

   Expected Output is like

  Apr-04-14
    post1
    post2
   /all post for that date
  Apr-01-14
    post5
    post6
    //so on

我正在

  Apr-04-2014 
     post1
  Apr-04-2014 
     post2
  Apr-04-2014 
     post3

我是棱角分明的新手。任何帮助都会有所帮助

Answer 1

试试这个

<强> Working Demo

<强> HTML

   <div ng-controller="MyCtrl">
    <div ng-repeat="data in flattenedResults">
        <div class="time"> <span>
     <b>{{data.created_at | badDateToISO | date:'MMM-d-yy'}}  </b></span>
   <div> 

 <u ng-show="data.story.length>0">Stories</u>
   <div ng-repeat="story in data.story">
         {{story.title}}{{story.created_at}}
   </div>

 <u ng-show="data.article.length>0">Articles</u>
   <div ng-repeat="article in data.article">
         {{article.title}}
   </div>

<强>脚本

 var myApp = angular.module('myApp', []);
 myApp.filter('badDateToISO', function () {
 return function (badTime) {
    var goodTime = badTime.replace(/(.+) (.+)/, "$1T$2Z");
    return goodTime;
  };
});

  myApp.controller('MyCtrl', function ($scope) {
    $scope.flattenedResults = [];
    $scope.comments = [{
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-28 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "story",
        "story": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test story 1",
            "content": "this is my story... 2",
            "created_at": "2014-04-30 22:04:36"
    }],
        "article": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-28 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "article",
        "article": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test article 33",
            "content": "this is my article... 33",
            "created_at": "2014-04-30 22:04:36"
    }],
        "story": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-25 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "article",
        "article": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test article 1",
            "content": "this is my article... 1",
            "created_at": "2014-04-30 22:04:36"
    }],
        "story": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-28 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "story",
        "story": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test story 2",
            "content": "this is my story... 2",
            "created_at": "2014-04-30 22:04:36"
    }],
        "article": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-25 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "article",
        "article": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test article 2",
            "content": "this is my article... 2",
            "created_at": "2014-04-30 22:04:36"
    }],
        "story": "[]"
}];

$scope.jsonFlatten = function () {
    $scope.dates = [];
    $scope.comments.reduce(function (result, item) {
        $scope.dates.push(item.created_at);
    }, 0);
    $scope.dates = _.uniq($scope.dates);
    angular.forEach($scope.dates, function (dateValue, dateKey) {
        var obj = {};
        obj.created_at = dateValue;
        var articleValues = [];
        var storyValues = [];
        angular.forEach($scope.comments, function (value, key) {
            if (dateValue === value.created_at) {
                obj._id = value._id;
                obj.post_id = value.post_id;
                if (value.type === 'story') {
                    angular.forEach(value.story, function (storyValue, storyKey) {
                        storyValues.push(storyValue)
                    });
                } else if (value.type === 'article') {
                    angular.forEach(value.article, function (articleValue, articleKey) {
                        articleValues.push(articleValue)
                    });
                }
            }
        });
        obj.story = storyValues;
        obj.article = articleValues;
        $scope.flattenedResults.push(obj);
    });
};

 $scope.jsonFlatten(); //calling the method jsonFlatten() and making the flatten json

}）;

在视图中的ng-repeat内按日期排序

1 个答案: