Question

到目前为止，我只使用ng-repeat来检索AngularJS中的结果，但这次我还剩下一些复杂的HTML结构。

以下是我的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>

正如您所看到的blog-headline-item元素不同，因此在这种情况下使用ng-repeat对我没有好处。

然后我有这个JSON数据：

[
  {
    "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"
  }
]

注意：在api url上有更多的记录，我只想展示一个例子。

所以我希望实现的目标...我希望将4条记录拉到前端，这些记录的featured值为1的对象，并根据它显示updated_at时间，应该显示最接近今天日期的4。如果您查看HTML结构，您会看到类blog-headline-item的元素有一个注释，其中包含每个元素的要求。

由于我无法使用ng-repeat，我不确定如何才能做到这一点，我们将非常感谢任何想法。

Answer 1

您可以使用lodash来帮助您实现这一目标，例如：

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

它将返回按最新且仅有4个项目排序的日期

Answer 2

我真的很想使用lodash来操作我的数据集合。所以，使用它，我会这样做：

工作示例： https://jsfiddle.net/relferreira/d0c0xmmx/2/

但你真的可以使用$ filter服务，或者简单的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();


}

AngularJS根据日期检索JSON记录

2 个答案: