如何使用过滤器在AngularJs中按月过滤

时间:2015-03-24 19:55:53

标签: angularjs angularjs-filter

我想在ng-repeat中使用AngularJs过滤器过滤数据。

这是我的ng-repeat代码段

<tr ng-repeat="finance in finances | filter:trierParDate ">
    <td>{{finance.created_at}}</td>
    <td>{{finance.prix | numeraljs:'argent'}}</td>
    <td>{{finance.grandtotal | numeraljs:'argent'}}</td>
</tr>

以下是按月过滤的按钮:

<div ng-click="trierParDate = {'created_at': '2015-03-12 22:43:07'}">Janvier</div>
<div ng-click="trierParDate = {'created_at': '2015-03-12 22:43:07'}">Février</div>
etc...

实际上,这些&#34;按钮&#34;返回一个条目,因为我只想测试它。现在我想知道如何按月过滤。

我想转换为:ng-click = {如果created_at属性在位置5到7(月份数据位置)包含03,则显示条目。}

1 个答案:

答案 0 :(得分:1)

您可以创建过滤器功能,并根据所选/所需月份过滤结果。这是一个有效的例子:

http://plnkr.co/edit/OTTAqykqGsJFrFyJYOjD?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    Show results for 
    <select ng-model = "selectedMonth">
      <option></option>
      <option value="0">Jan</option>  
      <option value="1">Feb</option>  
      <option value="2">Mar</option>  
      <option value="3">Apr</option>  
      <option value="4">May</option>  
      <option value="5">Jun</option>  
      <option value="6">Jul</option>  
      <option value="7">Aug</option>  
      <option value="8">Sep</option>  
      <option value="9">Oct</option>  
      <option value="10">Nov</option>  
      <option value="11">Dec</option>  
    </select>

    <ul>
      <li ng-repeat="a in appointments | filter: selectedMonthFilter">id: {{a.id}}, label: {{a.label}}, created: {{a.created}}</li>
    </ul>

  </body>

</html>

的javascript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.appointments = [];

  $scope.selectedMonth = "";

  $scope.selectedMonthFilter = function(element) {
    if(!$scope.selectedMonth) return true;
    return element.created.getMonth() == $scope.selectedMonth;
  }

  function randomDate(start, end) {
      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
  }  

  for(var i=0; i<1000; i++) {
    $scope.appointments.push({id: i, label: "Item number " + i, created: randomDate(new Date(2014, 0, 1), new Date())});
  }

});