Question

是否有一种使用日期字符串格式限制ng-repeat显示的方法？我正在尝试使表中的某些数据过期，例如：如果日期是2019/03/22 ..由于它是上周的数据，它将不会显示在表中

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.register = {
      regData: {
        branch: {},
      },
      names: [
        {name:"narquois",date:"2019/03/30"},
        {name:"vorpal",date:"2019/03/28"},
        {name:"keen",date:"2019/03/25"},
        {name:"argol",date:"2019/03/18"},
        {name:"long",date:"2019/03/17"},
        {name:"propolis",date:"2019/03/16"}
      ],
    };
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
    <thead>
       <tr align="center">
         <th>Name</th>
         <th>Date</th>
       </tr>
    </thead>			
    <tbody>
       <tr ng-repeat="person in register.names">
         <td align="center">{{ person.name }}</td>
         <td align="center">{{ person.date }}</td>
       </tr>
    </tbody>
</table> 
</div>

Answer 1

您可以创建一个自定义过滤器，从中可以获取星期的第一天和最后一天，并检查从数组传递的日期是否在该范围内。

js

$scope.filterCurrentWeek = function(row){   
  var today = new Date(); // get current date
  var first = today.getDate() - today.getDay();
  var last = first + 6;

  var firstDay = new Date(today.setDate(first)).toUTCString();
  console.log(firstDay)
  var lastDay = new Date(today.setDate(last)).toUTCString();
  console.log(lastDay)
  var rowDate = new Date(row.date)
  console.log(rowDate)

  if(Date.parse(firstDay) <= Date.parse(rowDate) && Date.parse(lastDay) >= Date.parse(rowDate)){
    return true;
  }
  else{
    return false;
  }

}

html

<table id="example" width="100%">
<thead>
   <tr align="center">
     <th>Name</th>
     <th>Date</th>
   </tr>
</thead>            
<tbody>
   <tr ng-repeat="person in register.names | filter: filterCurrentWeek">
     <td align="center">{{ person.name }}</td>
     <td align="center">{{ person.date }}</td>
   </tr>
</tbody>
</table>

Demo

使用yyyy / mm / dd格式以ng-repeat显示本周数据

1 个答案: