AngularJS 根据日期检索 JSON 记录

Question

I have only used ng-repeat to retrieve results in AngularJS so far however I am left with a little bit more of a complex HTML structure this time.

Here is an example of my HTML:

<section ng-controller="LandingController as vm">
  <div class="container-fluid">
    <div class="row" id="blog-headliner">
      <div class="col-md-6 col-sm-12 blog-headline-item">
        ///// JSON object with the earliest update date and has a featured value of 1
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass1 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass1 = ''">
        ///// JSON object with the 2nd earliest update date and has a featured value of 1
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass2 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass2 = ''">
        ///// JSON object with the 3rd earliest update date and has a featured value of 1
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass3 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass3 = ''">
        ///// JSON object with the 4th earliest update date and has a featured value of 1
      </div>
    </div>
  </div>
</section>

As you can see the blog-headline-item elements are different so using ng-repeat will be no good for me in this case.

I then have this JSON data:

[
  {
    "id": 3,
    "author_id": 1,
    "title": "Hello I am featured",
    "subtitle": "Yeahaaaa!",
    "content": "<p>Content<\/p>\r\n",
    "featured_image": "1513fefbb4c4ced364ca7b976e1b3b68bed9c7c3.jpg",
    "slug": "hello-i-am-featured-2",
    "published": 1,
    "featured": 1,
    "created_at": "2016-03-31 12:35:02",
    "updated_at": "2016-03-31 12:44:44",
    "published_at": "2016-03-31 12:35:06"
  },
  {
    "id": 4,
    "author_id": 1,
    "title": "Article",
    "subtitle": "This is an article",
    "content": "<p>This is an article about an article.<\/p>\r\n",
    "featured_image": "cf6b8210c93ad19a3b71922f36a96229abdc148a.jpg",
    "slug": "article",
    "published": 1,
    "featured": 0,
    "created_at": "2016-03-31 13:52:24",
    "updated_at": "2016-03-31 13:52:29",
    "published_at": "2016-03-31 13:52:29"
  }
]

NOTE: there are more records than this at the api url I just wanted to show an example.

So down to what I'd like to achieve... I want to pull through 4 records to the front end that have an object with a featured value of 1 and display them based on the updated_at time, the 4 closest to today's date should show. If you look at the HTML structure you will see that the elements with the class of blog-headline-item have a comment with the requirements for each one in them.

As I am unable to use ng-repeat I am unsure how else I can do this, any ideas would be much appreciated.

Answer 1

You can use lodash to help you to achieve that, for instance:

var dates = _([{date: new Date()}, {date: new Date(0)}]).orderBy('date', 'desc').value().splice(0,4)

It will return the date sorted by the newest and only 4 items

Answer 2

I really like to use lodash for manipulating my data collections. So, using it, I would do:

working example: https://jsfiddle.net/relferreira/d0c0xmmx/2/

But you can really do using the $filter service, or a simple foreach.

HTML:

<div data-ng-app="app">

  <section ng-controller="MainController as mainVm">
  <div class="container-fluid">
    <div class="row" id="blog-headliner">
      <div class="col-md-6 col-sm-12 blog-headline-item">
        ///// JSON object with the earliest update date and has a featured value of 1
        {{mainVm.filterData[0]}}
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass1 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass1 = ''">
        ///// JSON object with the 2nd earliest update date and has a featured value of 1
        {{mainVm.filterData[1]}}
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass2 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass2 = ''">
        ///// JSON object with the 3rd earliest update date and has a featured value of 1
        {{mainVm.filterData[2]}}
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass3 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass3 = ''">
        ///// JSON object with the 4th earliest update date and has a featured value of 1
        {{mainVm.filterData[3]}}
      </div>
    </div>
  </div>
</section>

</div>

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

    vm.data = [ ... ];

    vm.filterData = _.chain(vm.data)
                    .orderBy('updated_at', ['desc'])
                    .filter(function(e) { return e.featured == 1})
                    .value();


}