Limit the ng-repeat results based on search input using a transformation filter

I am currently working with an array of records that are being displayed in an HTML table with filters in the header. However, I have encountered an issue where some values are transformed by filters, causing the ng-repeat filter to fail.

<table class="table">
  <thead>
    <tr>
      <td><input ng-model="search.time" type="text" class="form-control" /></td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="record in records | filter: search">
      <td>{{record.time | timeFormatter}}</td>
    </tr>
  </tbody>
</table>

One example is that the value "0800" is displayed as "08:00 AM" due to the timeFormatter filter. While typing "08" works for filtering, entering "08:" or "AM" does not produce the desired results.

I am seeking advice on how to adjust the filter so it can work with the formatted values shown in the table column. Your assistance is greatly appreciated.

Thank you in advance.

javascriptangularjsangularjs-ng-repeatangularjs-filter

Answer №1

If you're looking to tweak a directive, give this code snippet a go:

    angular.module("app").directive("myDirective", function(){
   return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        ngModelController.$parsers.push(function(data) {
          //modify data from view format to model format
           return input.substring(0, 2) + ':' + input.substring(2)
        });

        ngModelController.$formatters.push(function(data) {
          //adjust data from model format to view format
         return input.substring(0, 2) + ':' + input.substring(2)
        });
      }
    };
});

Feel free to test it out on Plunker

Answer №2

It seems like your ng-model is set up to track changes in search.time, but your filter is currently only targeting the search object as a whole. Perhaps consider adjusting your filter to specifically focus on search.time for more accurate results.

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

Struggling with handling multiple jQuery AJAX requests on a single webpage

Greetings, I am currently working on a PHP Project that involves loading requests using ajax. Below are the two functions in question: Function One: Upon clicking the showNotify event, an ajax request is made to retrieve content with a spinner displayed u ...

javascriptphpajax

Is there a way for me to initiate another joyride adventure?

Encountering a challenge with my joyride tour - after completing one tour, I aim to commence a second. Despite attempting to trigger the second tour in the postRideCallback function, I find myself stuck in a loop with the first tour. Seeking guidance on re ...

javascriptjqueryzurb-joyride

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

javascriptcssreactjstailwind-css

Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. +---------------------------------------------+ | | Previous Image 0 | | | +------------------------------------+ | | +------------------------------------+ | | ...

htmlcssangularjs

Creating a seamless integration between a multi-step form in React and React Router

I've been learning how to use React + ReactRouter in order to create a multi-step form. After getting the example working from this link: , I encountered an issue. The problem with the example is that it doesn't utilize ReactRouter, causing the ...

javascriptreactjsreact-router

Guide on incorporating mouse movement while the mouse button is held down in JavaScript

For my project, I want to activate the mouse move event only when the mouse button is held down. I specifically need the action "OK Moved" to be triggered only when both the mouse button is held down and there is mouse movement. This is the code that I h ...

javascriptjquerymouseeventmousemovemousedown

Steps to implement an image zoom function triggered by a button click

I'm working on a school project that requires me to use only html, css, and javascript for creating a website. Currently, I'm designing a landing page with a button that will navigate the user to another page. My goal is to have the background im ...

javascripthtmlcss

What is the best way to retrieve and display all data from a paginated JSON service in reverse order using Angular?

Currently, I am communicating with a service that provides me with a JSON array containing 20 items. The information spans across multiple pages, possibly exceeding 20 pages. My goal is to aggregate all the data and store it in a single object so that I ca ...

angularjsjsoncordovapaginationreverse

Incorporating dynamic images into Laravel using Angular

I am currently trying to dynamically input the src value of an image using Angular. Below is the code I have written : HTML : <div ng-app="myApp" ng-controller="MyCtrl"> <img src="{{asset('assets/img/'.'/'. @{{ item.name ...

javascriptphpangularjslaravel

Implementing subgrids within ng-grid

I am new to angularjs and have a question about creating a sub grid inside another ng-grid. Is it possible? I want to have links in a column of the main grid, so that when a link is clicked, a new grid with 4 columns will be generated within the existing ...

angularjsng-grid

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Angular definitely typed does not convert into JavaScript

After installing TypeScript on my VS2013, I obtained the Angular 1.5 Definitely Typed from the NuGet package manager. Although angular.d.ts and its components do not generate angular.js file, when I create another TypeScript file like file1.ts, the file1. ...

angularjstypescript

The Contact.php page has the ability to send emails, however, the content of the

I have recently added a contact form to my website using a template. Although I am able to send and receive email messages successfully, I am facing an issue where the actual message content entered by users is not being received in my Inbox. Here is a sc ...

javascriptphpjqueryemailcontact-form

Flickering of image in JavaScript when mouse is hovered over and removed

I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...

javascripthtml

How to automatically refresh a page in AngularJS after a POST request

After making a POST request, I attempted to use $state.reload in my controller to refresh the page. However, it is not updating the data on my page after registering the form. I have to manually refresh the page to see the correct data. .controller(' ...

javascriptjqueryangularjsajaxpost

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

Saving Pictures in Database Without Using jQuery

Hey there fellow developers, I'm currently immersed in a web project that involves reconstructing a social media platform similar to snapchat. To capture images, I am utilizing my webcam with JavaScript and saving the image data to a variable named i ...

javascriptphphtmlajax

Error in MUI: Unable to access undefined properties (reading 'drawer')

Recently, I encountered an unexpected error in my project using MUI v5.0.2. Everything was working fine just a week ago with no errors, but now I'm facing this issue without any changes made to the code: Error: TypeError: Cannot read properties of un ...

javascriptreactjsmaterial-ui

What is the best way to pass the index value of a v-for loop as an argument to a computed property function in Vue?

I'm looking to pass the index value from a v-for loop (inside a path tag) as a parameter to a function stateData(index) defined in a computed property in Vue. I attempted to achieve this using v-model="stateData[index]", but an error is being displaye ...

javascripthtmlvue.js

AngularJS - Troubleshooting: Why Directive is Unable to Access Ancestor's Required Controller

To access a directive controller from an ancestor directive, I am using the require property in the "child" directive. Here is an example of how it is implemented: mmDirectives.directive('mmMapActions', function() { return { restrict : &ap ...

angularjsangularjs-directive