Having trouble with implementing both filter and infinite scroll simultaneously in an Ionic list?

I've encountered an issue with my ionic hybrid app related to angularjs filters. The code snippet below showcases the problem:

          <input type="search" placeholder="Search personalities" ng-model="name"  ng-change='alert("changed!")'> 
        </label>

    <ion-list id="personalities-list3">
        <ion-item class="item-avatar" id="personalities-list-item27"  ng-repeat="per in personality|limitTo:showlength|filter:{name:name}" ng-click="selectedpersonality(per)" auto-list-divider auto-list-divider-value="{{per.name}}" auto-list-divider-visible="{{divvisible}}">
            <img src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0'>
            <img src="img/no-image.jpg" ng-if='per.profileimage==""'>
            <h2>{{per.name}}</h2>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

The issue arises when searching for a specific name, such as "zolten rhimer," in a list of 18,000 values sorted alphabetically. Despite the name being present in the array, the list appears empty. I am seeking assistance in resolving this search filter problem.

Thank you,

javascriptangularjsionic-framework

Answer №1

Here is an example of how you can use it:

    <ion-list id="personalities-list3">
        <!--<ion-item class="item-divider" id="personalities-list-item-divider1"> A</ion-item> auto-list-divider auto-list-divider-value="{{per.name}}"-->
        <ion-item class="item-avatar" id="personalities-list-item27"  ng-repeat="per in personarraytosearch=personality|filter:{name:name}|limitTo:showlength " ng-click="selectedpersonality(per)" auto-list-divider auto-list-divider-value="{{per.name}}" auto-list-divider-visible="{{divvisible}}">
            <!--<img image-lazy-src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0' image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="1000">-->
            <img src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0'>
            <img src="img/no-image.jpg" ng-if='per.profileimage==""'>
            <h2>{{per.name}}</h2>
        </ion-item>
    </ion-list>

I believe this solution will be beneficial for your needs.

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

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

javascripthtmlangularjspaginationangularjs-orderby

I have successfully implemented ngCordova local notifications, but now I am looking for a way to make it trigger for each individual

Is there a way to trigger a notification on every logged-in user's mobile device when a value is changed and saved in Firebase? Currently, I am able to send a local notification using ngCordova when a user enters text in an ionicPopup with textarea. H ...

javascriptandroidangularjslocalnotificationngcordova

Ensure that the form is validated using ngDialog openConfirm before it can be closed

I am facing an issue with a button that triggers the opening of an ngDialog.openConfirm. In this dialog, there is a form containing a textarea that must have a minimum of 20 characters. Below is a simplified version of the code: someFunction() { let ...

javascripthtmlangularjsng-dialog

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font co ...

javascriptcssreactjssassstyling

Unbounded AngularJS 1.x looping of Ag-grid's server-side row model for retrieving infinite rows

I am obtaining a set of rows from the server, along with the lastRowIndex (which is currently at -1, indicating that there are more records available than what is being displayed). The column definition has been created and I can see the column headers in ...

javascriptangularjsgridag-grid

The table is unable to properly display the array data

My code includes an AJAX function that sends a GET request to an API and receives data in the format shown below: { "firstname": "John", "lastname": "Doe", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6 ...

javascripthtmlfor-loophtml-table

Unpredictable jQuery Ajax setTimeout

I have a script that retrieves data from ajax.php and displays it in a div. The intention is for the information to be shown for a period of 3 seconds before hiding the #ajax-content and displaying #welcome-content. Most of the time it works as intended, ...

javascriptphpjqueryajax

Implementing Ajax functionality in MVC 3 to return a partial view

I wanted to express my gratitude for this invaluable site that has taught me so much. Currently, I am working on an MVC3 component where I need to populate a selectlist and upon user selection, load a partial view with the relevant data displayed. Everythi ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-3

Steps to remove a specific child element using jQuery:

CSS: <h1><br style="clear:both;"></h1> I am currently working on a project that involves using the Wikipedia API. One issue I've run into is cleaning up the raw HTML output from Wikipedia, specifically dealing with removing a speci ...

javascriptjquery

The aggregation pipeline in nodeJS with mongoDB is failing to return any results, returning an empty array instead

Currently, I am enrolled in Jonas Schmeddtman's Node.js course where I am working on developing a tour App. However, I have encountered an issue where sending a request via Postman on the specified route results in an empty array instead of the expect ...

javascriptnode.jsecmascript-6

Achieving multiple validations on a single element in AngularJS, along with the ability to validate

Currently, I am in the process of constructing a form and utilizing the built-in AngularJS validation objects to validate the form. The following is an overview of my form: <form name="myForm" ng-submit="DoSomething()" novalidate> <te ...

javascriptangularjs

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

I am facing an issue with setting the top icon of a notification sent from a website in Microsoft Edge. Let's consider this code as an example: Notification.requestPermission(function (permission) { if (permission == "granted") { new ...

javascripthtmlnotificationswindows-10microsoft-edge

altering elements with AngularJS depending on dropdown selection

I am incorporating AngularJS into my project There are 3 select dropdowns and a button that fetches a JSON list. The primary select dropdown is constructed as follows: <select id='sort' ng-model='sort'> <option value=&apos ...

angularjs

Learn how to send data from a MySQL server to a Node.js application using Socket.IO

I've been facing a challenge recently. I am attempting to listen for events from the @rodrigogs/my-sql events node package and then emit those events through socket-io to the react client. However, there seems to be a disconnect that I can't see ...

javascriptmysqlnode.jssocket.iomysql-event

Tips for triggering several functions with a single onClick event in React?

I am currently working on a React Project where I have defined several functions to set conditions for rendering components on the page. However, I now need to be able to call all these functions again within the components when a button is clicked, in ord ...

javascriptreactjs

Deciphering a JSON Array in JavaScript to extract specific components

I have a brief snippet for a JSON array and a JavaScript function that currently returns a single argument: <!DOCTYPE html> <html> <body> <h2>JSON Array Test</h2> <p id="outputid"></p> <script> var arrayi ...

javascriptarraysjsonstringparsing

Navigating - Utilizing dot-notation to reach the top-level function in Express

If we want to use express in a basic javascript file, all we need to do is add the following two lines of code at the beginning (after installing it through npm): var foo = require('express'); var app = foo(); According to the express API guide ...

javascriptnode.jsexpress

Leveraging useEffect and useContext during data retrieval

I'm currently in the process of learning how to utilize React's Context API and Hooks while working on a project that involves using fetch(). Although I am able to make the request successfully, I encounter an issue where I can't retrieve t ...

javascriptreactjsnext.js

Tips on managing ASP .NET API's HttpResponseMessage for file downloads

I came across a solution on how to download a file from an asp.net API at this link: As a result, I created an API handler with the following code: public HttpResponseMessage Post([FromBody]dynamic result) { var localFilePath = graph ...

javascriptasp.netangularjsajaxasp.net-web-api

Using NGRX Effects to Load Data for a Specific Item in Angular

On my website, there is a page that displays a range of products from the store managed by a reducer called products. When an action PRODUCTS.LOAD_ALL is dispatched, it triggers an API call through an effect and then sends a PRODUCTS.LOAD_ALL_SUCCESS actio ...

javascriptangularjsstoreeffectsngrx