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

编程入门 行业动态 更新时间:2024-10-28 06:22:30
本文介绍了如何使用过滤器在 AngularJs 中按月过滤的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

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

I want to filter data using AngularJs filter in a ng-repeat.

这是我的 ng-repeat 片段

Here is my ng-repeat snippet

<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>

这是我按月份过滤的按钮:

Here is my buttons to filter by months:

<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...

实际上,这些按钮"返回一个条目,因为我只是想对其进行测试.现在我想知道如何按月过滤.

Actually, these "buttons" returns a single entry as I just wanted to test it. Now I wonder how to filter by month.

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

I would like that translates to: ng-click = {if the created_at property contains 03 at position 5 to 7 (month data position), then show the entries.}

推荐答案

您可以创建过滤器功能,并根据选定/期望的月份过滤结果.这是一个工作示例:

You can create a filter function, and filter results based on a selected / desired month. Here's a working example:

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/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:

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())});
  }

});

这篇关于如何使用过滤器在 AngularJs 中按月过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

更多推荐

[db:关键词]

本文发布于:2023-04-21 19:31:40,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1008941.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:过滤器   如何使用   按月   AngularJs

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!