Narrow down your search results with date range filtering in Angular Material

Seeking guidance as a newcomer to Angular Material, I am trying to implement a date range filter for a table of N results. The options in the filter select are (1 day, 5 days, 1 week, 15 days), which are populated using a variable

JS

vm.rangos=[
     {id:"1",name:'1 day',value:'1'},
     {id:"2",name:'5 days',value:'5'},
     {id:"3",name:'1 Week',value:'7'},
     {id:"4",name:'15 days',value:'15'}
  ];

HTML

<div layout="row" flex="90" layout-align="start center">
    <label flex="25">Range</label>
        <select flex="60" ng-model="vm.rangoSelected" placeholder="" ng-options="ran.name for ran  in vm.rangos" class="custom-select ">
        </select>
 </div>

I'm struggling with how to create the function to apply the filter and display results within the selected range

This function captures the value from the selection

function sendFilter(){
      var filterSend = "";
      switch(vm.filterSelected){

          case 'range':
            filterSend = vm.rangoSelected.value;
          break;
          default:
            alert('not done');
          break;

      }
      vm.showLastMovements(filterSend);
  }

JSON

{
  "result": {
    "httpCode": 200,
    "httpMessage": "OK",
    "moreInformation": ""
  },
  "data": {
    "movements": [
      {
        "operationDate": "2017-01-18",
        "concept": "Decathlon",
        "amount": "-450.0",
        "currency": "EUR",
        "balance": "29150.0",
        "category": 1
      },
      {
        "operationDate": "2017-01-18",
        "concept": "Corte Ingles",
        "amount": "-259.0",
        "currency": "EUR",
        "balance": "34000.0",
        "category": 2
      },
      {
        "operationDate": "2017-01-15",
        "concept": "Carrefour",
        "amount": "348.0",
        "currency": "EUR",
        "balance": "12000.0",
        "category": 1
      },
      {
        "operationDate": "2017-01-01",
        "concept": "Corte Ingles",
        "amount": "-259.0",
        "currency": "EUR",
        "balance": "34000.0",
        "category": 2
      },
      {
        "operationDate": "2016-12-30",
        "concept": "Cortefiel",
        "amount": "348.0",
        "currency": "EUR",
        "balance": "12000.0",
        "category": 1
      }

    ]
  }
}

This function displays the selected value with an alert.

If you have any insights on creating this function or tips on how to proceed with displaying records based on the selection made, your assistance would be greatly appreciated.

Many thanks

Answer №1

Below is the html code provided:

<div layout="row" flex="90" layout-align="start center">
    <label flex="25">Rango</label>
        <select flex="60" ng-model="vm.rangoSelected" placeholder="" ng-options="ran.name for ran  in vm.rangos" class="selectPersonalizado ">
        </select>
 </div>

Let's assume this table iteration through the data.movements list:

  <tr md-row  ng-repeat="movement in data.movements | filter: customFilter">
    <td md-cell>{{movement}}</td>
  </tr>

This is how the controller function looks like:

function customFilter(movement){
   var movementDate = new Date (movement.operationDate);
   var filterDate= new Date();
   filterDate.setDate(filterDate.getDate() - vm.rangoSelected.value) //Transform rangoSelected.value to days.
   return (movementDate.getTime() > filterDate.getTime()); //Returns true if the movement's date is within selected range.
}

Note that getTime() gives milliseconds since 1970/01/01, aiding in range calculations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jquery slider for inputting phone number on a mobile device

I am currently working on enhancing the user interface by implementing a feature where users can select a mobile number using a slider. The idea is that the user will choose a digit between 0 and 9 using the slider, then confirm their selection by pressing ...

Keep track of the input values by storing them in an array after they are

Creating an Angular application to read barcodes. barcode-scanner.component.html <form #f="ngForm" class="mt-3 text-center" id="myform" (ngSubmit)="onSubmit(f)"> <div class="text-center"> <input type="text" maxlength= ...

Modify the color of a div element in React when it is clicked on

My goal is to change the color of each div individually when clicked. However, I am facing an issue where all divs change color at once when only one is clicked. I need help in modifying my code to achieve the desired behavior. Below is the current implem ...

Having trouble with your Bootstrap 4 Dropdown Menu?

I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...

Angular error message: The property 'results' is not found on the type 'ICandidate'

I am currently working with Angular-12 and have the following code snippet: Interface: export interface ICandidate { id: number; first_name: string; other_name: string; last_name : string; email: string; gender : string; user_photo: any; m ...

Tips for sorting through various elements or items

How can I improve my filtering function to select multiple items simultaneously, such as fruits and animals, or even 3+ items? Currently, it only allows selecting one item at a time. I attempted using , but it had bugs that displayed the text incorrectly. ...

Alert: Circular dependency detected!

In an effort to have cleaner imports, I've set up a typescript file that exports all the components I'm using. For example: import { Comp1, Comp2, Comp3 } from index/components However, when using this approach, I encounter a warning during bu ...

Issues arise with the Dropend Menu in Bootstrap when attempting to utilize a dropdown menu

As I work on developing a sidebar using Bootstrap 5, I encountered an issue with the positioning of a "Dropdown" and "Dropend" menu when they are open. Specifically, while the Dropdown menu functions correctly, the Dropend menu does not align properly. In ...

Leveraging the capabilities of the Freshdesk API

Has anyone had any experience utilizing the FRESHDESK API specifically for creating tickets? The documentation states the following: Request URL: domain_URL/helpdesk/tickets.xml Request method: POST <helpdesk_ticket> <description>Disk fai ...

What is the best way to include 2 or more radio buttons in every row of data within a table?

Is it possible to have multiple radio buttons for each row of data in a table? The current code snippet is as follows: echo '<table> <tr> <td>Home</td> <td>Not Home</td> <td>Address</td> <td>Su ...

What is the best approach to send data to the parent when closing $mdDialog?

When I open a Dialog Window, it has its own controller. Is there a way for me to modify data in the differentController that belongs to the Dialog Window and then send the modified data back to the parent controller when the dialog is being removed? fun ...

Angular Error - The argument 'homeController' is not defined as a function, it is returning undefined

I am encountering an error with my ionic application when navigating within the `homeController's scope. Below is a snippet from my app.js file: var app = angular.module('app', [ //external modules 'ionic', //feature module ...

Can Angular i18n facilitate language switching?

My objective is to switch the language from English (United States) to Indonesia using a button. View Source Code https://i.sstatic.net/0YlfWaCY.gif The issue is that the tutorial does not cover how to implement the language change feature. Why opt for ...

creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...

Changing the width of an HTML table does not produce any noticeable results

I attempted to create a striped table with 5 columns. The desired column sizes are: 10% width --- 10% width --- 40% width --- 20% width --- 20% width However, my current code is not achieving the correct widths (the 'description' column does n ...

Exploring the process of constructing this form with the assistance of Bootstrap

Create Dropdown Form https://i.sstatic.net/rqJtS.png I am looking to create a form that allows for updating team scores based on kills. I am struggling to divide the form into 2 sections for input, as demonstrated. I am using only bootstrap for styling, ...

Assign a value to a file input in Angular 6

I'm currently working with Angular 6 and I have a requirement to retrieve an image that is dropped into a div element and assign it as the value of an input type="file" within a form. The process involves the user dropping an image into the designate ...

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

I'm attempting to transfer the textbox value from Page-1 to Page-2 using the code below, but I am encountering difficulties. Page-1.html <div > <div style="height: 400px"> <h2>Partial view-1</h2> <p> ...

Is it possible to analyze an API call and determine the frequency of a specific field?

Code: var textArray = new Array(); var allText = results.data._contained.text; for (var i = 0; i < allText.length; i++) { var text1 = allText[i]; var textHtml = "<div id='text_item'>"; textHtml += "& ...

Customize the initial color of the text field in Material UI

I am currently working with the mui TextField component and facing an issue. I am able to change the color when it is focused using the theme, but I cannot find a way to adjust its color (label and border) in its initial state when it's not focused. I ...