Question

我有下表，我想在ng-repeat中仅显示最新的3个日期。我将orderBy与-一起使用，并将结果限制为3。

╔════╦═════════════════╦══════════╗
║ id ║      name       ║   date   ║
╠════╬═════════════════╬══════════╣
║  0 ║ Live Cooking    ║ 08/10/17 ║
║  1 ║ Rainy Season    ║ 08/29/17 ║
║  2 ║ Heart-Healthy   ║ 09/25/17 ║
║  3 ║ 5th Anniversary ║ 09/26/17 ║
║  4 ║ Health Living   ║ 02/15/18 ║
║  5 ║ Indoor Party    ║ 02/20/18 ║
╚════╩═════════════════╩══════════╝

HTML

<div class="recent-article_container">
    <h3>Recent Articles</h3>
    <a href="{{art.page}}" class="nav_refresh" ng-repeat="art in mainCtrl.articles | orderBy:'-date' | limitTo:3">
        <div class="recent-article">
            <div class="media-body">
                <h5 class="recent-article_title">{{art.name}}</h5>
                <small class="article_date pull-left">{{art.date}}</small>
            </div>
        </div>
    </a>
</div>

控制器

var app = angular.module('myApp', [])
app.controller('MainController', function ($scope, $http) {
    var self = this;
    $http({
        method: 'POST',
        url: '../json/article-archives.json',
        data: self.articles
    }).then(function (response) {
        self.articles = response.data;
    }, function () { console.log('Error'); });
});

我想得到以下结果：

╔════╦═════════════════╦══════════╗
║ id ║      name       ║   date   ║
╠════╬═════════════════╬══════════╣
║  5 ║ Indoor Party    ║ 02/20/18 ║
║  4 ║ Health Living   ║ 02/15/18 ║
║  3 ║ 5th Anniversary ║ 09/26/17 ║
╚════╩═════════════════╩══════════╝

但它没有按预期工作，我也尝试使用-id，但它也不起作用。如何以最新的3个日期降序获得结果？

Answer 1

<强>首先：您必须在控制器中添加自定义比较功能，因为您的日期未针对orderby格式化。方法$scope.compareDates已添加到代码中。

<强>第二您需要在html中添加自定义函数，如下所示，我认为您已经在以下行之前使用了<div ng-controller = "MainController">之类的代码：

 <a href="{{art.page}}" class="nav_refresh" ng-repeat="art in articles | orderBy:'date':true:compareDates | limitTo:3">

<强>第三要访问控制器范围变量，需要在变量名称前添加$scope.。我改变了：

$scope.articles = {};
$http({
    method: 'POST',
    url: '../json/article-archives.json',
    data: $scope.articles
}).then(function (response) {
    $scope.articles = response.data;
},

最终解决方案：

针对此处给出的问题更新了解决方案，只需打开您的HTTP邮政编码：

var app = angular.module('myApp', [])
app.controller('MainController', function ($scope, $http) {
    $scope.articles = [
                       {
                           date:'6/11/2018',
                           name: 'Test1'
        
                       },
                       {
                           date:'6/11/2017',
                           name: 'Test2'
        
                       },
                       {
                           date:'6/11/2019',
                           name: 'Test3'
        
                       }
                       ,
                       {
                           date:'6/11/2007',
                           name: 'Test3'
        
                       }
                      
             ];
    //$http({
    //    method: 'POST',
    //    url: './article.json',
     //   data: $scope.articles
    //}).then(function (response) {
    //    $scope.articles = response.data;
    //}, function () { console.log('Error'); });

   $scope.compareDates = function(date1, date2) {
    console.log(date1)
    var split1 = (date1 + '').split('/');
    var split2 = (date2 + '').split('/');

    var date1compare = split1[2] + split1[0] + split1[1];
    var date2compare = split2[2] + split2[0] + split2[1];

    return (date1compare > date2compare ? -1 : 1);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myApp">
<div ng-controller = "MainController">
  <div class="recent-article_container">
      <h3>Recent Articles</h3>
      <a href="{{art.page}}" class="nav_refresh" ng-repeat="art in articles | orderBy:'date':true:compareDates | limitTo:3">
          <div class="recent-article">
              <div class="media-body">
                  <h5 class="recent-article_title">{{art.name}}</h5>
                  <small class="article_date pull-left">{{art.date}}</small>
              </div>
          </div>
      </a>
  </div>
 </div>
</div>

Answer 2

您可以使用limitTo获取最后三个结果并为订单订购orderBy。

  <a href="{{art.page}}" class="nav_refresh" ng-repeat="art in mainCtrl.articles | limitTo:-3 | orderBy:'-id'">

希望它能解决你的问题

获取ng-repeat的最新3个日期

2 个答案: