Verifying whether an ng-repeat returns an empty set following a filter operation

I am attempting to achieve the following:

  • Display a list of approximately 50 items using ng-repeat
  • Filter the list based on a text field (
    ng-repeat="note in notes|filter:basicFilter"
    )
  • If the basic filter returns no results (or a small number, like 5), make an $http call for a deep search in the database

Is there a method to check the results of the filter after the "basic" filter, so I can then initiate an $http call back to the server? Is there a predefined "filter" function in Angular that I can utilize?

I have attempted to monitor the variable:

  $scope.$watch('filtered_notes', function() {
    // unable to go through with this action
  });

Where 

ng-repeat="note in filtered_notes = (notes | orderBy:['-note_time']|filter:noteFilter|limitTo:limit)"

However, it results in an error: 

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

javascriptangularjsangularjs-ng-repeat

Answer №1

If you want to implement a custom filter, take a look at the example below

HTML Code Snippet

<div ng-repeat="item in filtered_items |  customFilter:filterInput">

Custom Filter JavaScript Function

myApp.filter('customFilter', function() {
   return function(items, input) {
    var filteredItems = [];

    angular.forEach(items, function(element) {
       if(/* put your condition here with 'input' */) {
          filteredItems.push(element);
        }

    });

    if(filteredItems.length >= 10 ){
         /* make an HTTP request or trigger an event using $broadcast */
    }

    return filteredItems;
  };

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

Cease the cropping function for Cropper.js when it extends beyond the boundaries of

Is there a way to prevent the crop corners from moving once the user drags the cursor out of the image while cropping? I encountered an issue where the cropped corners are displaced from the cursor when the user moves out of the image and then back in, wh ...

javascriptimagecrop

Tips for swapping out an item mid-scrolling?

What is the best way to change the navbar when scrolling a page in React? How can I achieve this while following React's concepts? Is using getElementById considered bad practice? const useState = React.useState const useEffect = React.useEffect con ...

javascriptreactjs

Utilizing a Bootstrap 3 modal within an AngularJS application with html5mode

How to display Bootstrap Modal in the first click when using html5Mode(true). When clicking on launch demo modal, the URL changes to /#myModal upon the 1st click but the modal does not appear. The modal only appears upon clicking launch demo modal again. ...

twitter-bootstrapangularjstwitter-bootstrap-3bootstrap-modal

Is it possible to utilize both body-parser and Formidable simultaneously?

I've been working on a problem for a few days now, but I'm having trouble understanding certain aspects of it. My website is built using NodeJS and ExpressJS, with form handling done through body-parser. var adName = req.body.adName; var adMess ...

javascriptnode.jsexpressformidablebody-parser

Adding the <a> tag causes Superfish to malfunction

I've been struggling to get the latest Superfish menu code working with lists that include the <a> tag. I've double-checked everything, but it seems like I'm missing something obvious. Can anyone help me figure out what's wrong? ...

javascriptcsssuperfish

Issue: Query is not re-executing after navigatingDescription: The query is

On my screen, I have implemented a query as follows: export const AllFriends: React.FunctionComponent = () => { const navigation = useNavigation(); const { data, error } = useGetMyProfileQuery({ onCompleted: () => { console.log('h ...

javascriptreactjstypescriptreact-nativereact-navigation

Exploring the World of Dates with Angular JS

let discoverDate = new Date('08-24-2015'); let occurDate = new Date('06-07-2018'); let discover = $filter("date")(discoverDate, "MM/dd/yyyy"); let occur = $filter("date")(occurDate, "MM/dd/yyyy"); console.log(discover); console.log(oc ...

javascriptangularjs

Converting JSON to CSV using Ionic and Parse, then sending an email with the CSV file attached

Can anyone help me with parsing a Json object to csv and sending it to a custom email address with the csv file as an attachment? I am currently using Ionic along with Mailgun to send emails without attachments, but I discovered that Mailgun does not supp ...

angularjsjsonparse-platformionic-frameworkmailgun

Is it possible to establish multiple connections simultaneously using Stomp?

I have been utilizing the ng2-stomp-service in my Angular application. Is it advisable to set up multiple connections (not just multiple subscriptions)? In the past, I have always seen a single connection being established, with several subscriptions made ...

javascriptangularstomp

Aligning the tooltip element vertically

I've created a unique flexbox calendar layout with CSS tooltips that appear on hover. One challenge I'm facing is vertically aligning these tooltips with the corresponding calendar dates effectively. Although I prefer to achieve this alignment u ...

javascriptjquerycssflexbox

Having trouble getting Vue.js hello world to display on the page

I am attempting to create a Hello World app following the Vue.js site's get started documentation. Everything seems to be in order, but only the HTML code is being displayed on the page. Vue version: 1.0.26 Below is the HTML code: <!DOCTYPE ht ...

javascriptvue.js

Access the original source code using jQuery

Is there a way to retrieve the raw HTML code (as seen in Chrome's source code window) using JQuery without having quotes converted to &quot or HTML symbols converted to text? I have tried using html() and text(), but neither method seemed to give ...

javascriptjqueryhtml

Setting the $dirty flag to true when a value is entered in the text box, but not the other way around

When I enter a value in the text box, myForm.$dirty gets set to true. However, the flag does not revert back to false when I delete all values from the text box. Why is this happening and how can I fix it? <input name="input" ng-model="myModel.text"& ...

javascriptangularjsangularjs-directive

The functionality of Bootstrap's Modal feature seems to be malfunctioning

I'm attempting to test the sample modals for my project, but even the codes from jfiddles are not working for me. When I click the button, it only gives me a dimmed window. I have also tried searching on Google for a solution, but to no avail. Below ...

javascriptphpjquerytwitter-bootstrap

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

javascriptjqueryhtmlaudioplaylist

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

Question: What is the best method for generating a unique and consistent checksum across all browsers? Additionally, how can a SHA256/MD5 checksum string be converted to 64-bit? How can files be read without requiring excessive amounts of RAM when ...

javascriptalgorithmtypescriptchecksumsha256

call a custom form submission using jquery first, followed by a regular form submission

Is it possible to attach a submit() handler to a form in order to execute an ajax request, and then have the form submit itself normally once the request is complete? Using $('#myForm').submit() seems to just result in the same function being cal ...

javascriptjqueryajaxforms

Simple Method to Retrieve one document from Firebase v9 in a React Application

Is it possible to retrieve a document from Firebasev9 using a slug instead of an id with the useDocument Hook? useDocument Hook import { useEffect, useState } from "react" // firebase import import { doc, onSnapshot } from "firebase/firesto ...

javascriptreactjsfirebasegoogle-cloud-firestore

Validating the same input in Angular Formly allows for consistent and

I am looking to create a validation process in Formly that ensures two input fields (both for email) return the same value. Currently, I have successfully implemented a check that compares the input field's value with the email field. vm.fields = [ ...

angularjsvalidationangular-formly

Tips for changing a fullscreen HTML5 video appearance

I discovered a way to change the appearance of a regular video element using this CSS code: transform: rotate(9deg) !important; But, when I try to make the video fullscreen, the user-agent CSS rules seem to automatically take control: https://i.sstatic. ...

javascriptcsshtmlvideo