Limit the number of elements in an Angular object by using the filter function

I've implemented an angularjs filter method on a repeated array of items in an attempt to filter numbers using a limitTo filter. However, the result is not reflecting in the DOM.

Below is the html code snippet:

<div ng-controller="demo as d">
      <input type="text" ng-model="d.test" ng-change="d.filterthis(d.test)"><br>
      <div ng-repeat="item in d.items | limitTo:d.limitto  track by $index">
            <span ng-show="!item.show">{{item.myno}}</span> - 
            <span ng-show="!item.show">{{$index}} - {{item.mystr}}</span><br>
      </div>
</div>

Filter function in App.js within angularjs script:

this.filterthis = function(filter){
    that.items.map(function(filter){
        return function(obj){
            obj.show=true;
            if(obj.myno.toString().indexOf(filter) >-1){
                console.log(obj);
                obj.show=false;
            }
            return obj;
        }
    }(filter));
};

The 'items' array structure is as follows:

this.items = [{
        show:false,
        myno:10,
        mystr:"test1"
    }];

http://plnkr.co/edit/bTdlTpSeZuPyGpolXLEG

Answer №1

When "show" is designated as a key on your items, it does not eliminate it from the ng-repeat. Therefore, the limitTo filter will still display the items. To address this, you should make use of the filter filter in the repeat like the following:

<input type="text" ng-model="d.search"><br>
<div ng-repeat="item in d.items | filter:{myno:d.search} | limitTo:d.limitto track by $index">
    <span>{{item.myno}}</span> - 
    <span>{{$index}} - {{item.mystr}}</span><br>
</div>

It's crucial to note that the order is significant here. If you apply limitTo first and then filter, you will only be filtering the limited result. You can modify the key for filtering by changing {myno:d.search} to another key. Alternatively, if you wish to search the entire object, simply utilize d.search.

Access Updated Plunker Here

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

Simulate a new Date object in Deno for testing purposes

Has anyone successfully implemented something similar to jest.spyOn(global, 'Date').mockImplementation(() => now); in Deno? I've searched through the Deno documentation for mock functionality available at this link, as well as explored t ...

What is the best way to establish a global constant that can be accessed by multiple controllers in AngularJS?

Imagine I need to create a constant variable that can be shared between controllers in Angularjs; $webroot = "localhost/webroot/app" After some research, it appears that services are the recommended approach. But which one should I use? Should I implemen ...

What are some methods for bypassing the use of a keypad for a specific input

I have a mobile app built with Ionic. When the user taps on any input field, the keypad opens which works well. However, I have a datepicker with an input field where I want to prevent the keypad from opening. How can I achieve this? <div class="col" ...

When trying to upload a file through input using WebDriver, the process gets stuck once the sendKeys

WebElement uploadInput = browser.findElementByXPath("[correct_identifier]"); uploadInput.sendKeys(elementPath); The script successfully initiates the file upload process, however, the custom JavaScript loading screen persists and fails to disappear as exp ...

Unable to get CSS transition to function properly after adding a class using jQuery

I am trying to create a hover effect that shows an image when the mouse is over a specific div, but for some reason, the transition is not working as expected. I understand that using visibility: hidden cannot be animated. Here is the code snippet: $(d ...

issues with ionic routing, malfunctioning

I'm completely new to Ionic and currently working on an application. However, I've hit a roadblock when it comes to routing between pages using tabs. I am struggling to grasp how the control flows into $stateProvider.state(...) and have encounter ...

Getting the Request Body Content in Express Middleware

Currently, I am in the process of developing a small API logger to use as an Express middleware. This logger is designed to gather data from both the request and response objects, then store this information in a JSON file on disk for later reference. Her ...

Tips for maintaining values in Kendo MultiSelect after editing within a grid template

I am encountering an unusual issue with a grid that displays a comma-separated list of values and utilizes an array in a template editor for the grid. When I add a value to the multiselect, save in the editor, and then reopen the editor, only one of the mo ...

Tips for refreshing the Vuex store to accommodate a new message within a messageSet

I've been working on integrating vue-socket.io into a chat application. I managed to set up the socket for creating rooms, but now I'm facing the challenge of displaying messages between chats and updating the Vuex store to show messages as I swi ...

Guide to implementing if else statements with Protractor

I am facing some unusual situations and I'm not quite sure how to address them. As a newcomer to testing, I've been tasked with testing a website's cart function for proper functionality. The challenge arises when we add a certain number o ...

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

I have been working with the Responsive Slides jQuery plugin and made some custom modifications. Everything is going smoothly, but I am facing an issue with getting the pager and next/prev controls to fade in when hovering over the container. Although I s ...

How can you loop through keys and values in a JSON object using JavaScript?

I am attempting to cycle through the JSON data below: { "VERSION" : "2006-10-27.a", "JOBNAME" : "EXEC_", "JOBHOST" : "Test", "LSFQUEUE" : "45", "LSFLIMIT" : "2006-10-27", "NEWUSER" : "3", "NEWGROUP" : "2", "NEWMODUS" : "640" } The keys in this JSON are d ...

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

Adding a function into a node within PostgreSQL

Hi there, I'm currently following a tutorial and attempting to execute a simple insert query, however, I keep encountering a 404 error. I am using Postman to input values. function function insertUser(req, res, next){ req.body.users = parseInt(r ...

Ways to fix the loading error in AngularJS version 1.3.5?

My HTML page includes AngularJS components. Below is the code snippet: <!DOCTYPE html> <html ng-app="MyApp"> <head> <base href="/"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l ...

Can someone explain why the console.log(items) command seems to be executing twice

Item.find() .then(function (items) { if (items.length === 0) { Item.insertMany(defaultItems) .then(function () { console.log("Successfully Saved"); }) .catch(function (err) { console.l ...

Align boxes in the center within a DIV container

Here is the box design that I have created: The green color boxes are generated dynamically inside a "col-md-10" div. If there are less than 3 boxes in the second row, I would like to center align them. For example, in this case, I want the "Bi-monthly" b ...

Having difficulty utilizing the express.session module in conjunction with HTTPS

I need to implement authentication and session creation on a HTTPS static website using expressjs. Here is the code snippet: app.js: // Set up the https server var express = require('express'); var https = require('https'); var http ...

Cannot choose an option using JQuery Select2

Encountering an issue with Select2. The functionality seems to be working fine, except for the inability to select any option. Utilizing select2 version 3.5.3 along with KnockoutJS, CoffeeScript, and JQuery. Here is my select2 code: generateSelect3 =-> ...

Exploring search filtering feature for arrays in AngularJS

When the user selects multiple 'Author' choices from the people picker, I need to filter an array based on the corresponding DisplayText using ng-repeat="item in filteredart = (filteredArticles |filter: AuthorArray ") Currently, I am able to fil ...