How to efficiently use ng-repeat and toggle filter in AngularJS?

Struggling with creating a filter expression.

I am working with an array of documents:

[{title: 'doc1', read: false}
{title: 'doc2', read: false}
{title: 'doc3', read: false}
{title: 'doc4', read: true}
{title: 'doc5', read: false}]

In the view, I currently have 

<input type="checkbox" ng-model="filterRead">
<div ng-repeat="doc in documents track by $index | filter: ??? ">
   {{doc.title}}
</div>

If the checkbox/filterRead is checked, display all documents without any filter. If unchecked, only show documents where doc.read=false. Having difficulty coming up with the appropriate filter expression.

javascriptangularjsfilter

Answer №1

Based on your reasoning, there is no need for a filter. You could simply utilize an ng-if:

Here is the controller code (alternatively you can include the logic directly in the HTML):

$scope.showDoc = function () {
    return $scope.filterRead || !doc.read;
}

And here is the corresponding HTML:

<div ng-repeat="doc in documents track by $index" ng-if="showDoc()">
   {{doc.title}}
</div>

Answer №2

To achieve this, you can use a template-only approach. See the example below:

<input type="checkbox" ng-model="filterRead.read" ng-true-value="false" ng-false-value="'!null'">
<div ng-repeat="doc in documents | filter:filterRead track by $index ">
    {{doc.title}}
</div>

The ngFalseValue directive plays a key role here. It sets the model filterRead.read to a value that is neither true nor false when the checkbox is not selected. As a result, all records are displayed.

Check out the demo here: http://plnkr.co/edit/GO9vAZI3ghZuFb2eqa6h?p=preview

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

The transition from Vuetify3's VSimpleTable to VTable is ineffective and unsuccessful

The v-simple-table component has been renamed to v-table Old code that was using v-simple-table may not work correctly after the renaming. It is recommended to use v-data-table with the same data, as it works correctly. https://i.sstatic.net/3GVdYMWl.png ...

javascriptvue.jsvuejs3vuetify.jsvuetifyjs3

When trying to use routes with the .map() function, it does not seem

I am currently working on developing a multi-page web application using react-router-dom. However, I have encountered an issue with the user list page (userlist.js) where the data inside the .map() function is not being returned. Interestingly, the code pr ...

javascriptreactjsexpress

Obtaining a targeted group value from a data.table object and converting it into a vector in R

I have a series of data points that are structured as follows: library(data.table) dt1 <- data.table(age_group = c("young", "old"), ratio = runif(2)) dt2 <- data.table(age_group = c("young", "old"), ratio = ru ...

rfilterdata.tableapplysapply

Struggling with conditionally rendering components or elements in React while managing state

I am currently working on a react login/signup form where the user lands on the signup section by default. My goal is to display the login section when the user clicks on the login button and show the products section when the user clicks on "Get Started" ...

javascriptreactjsdomreact-routerconditional-statements

What is the best method for interacting with a blocked element in Protractor?

Whenever I attempt to click a button, a popup seems to appear in front of it, causing my automation script to fail with an error message stating that the element is intercepted and not clickable. Even after scrolling down to the element with a function, th ...

javascriptseleniumautomationprotractor

Issue related to conflicting jQuery references and receiving multiple versions of jQuery simultaneously

Despite having only a reference to jQuery version 1.9.1 in the scripts, version 1.8.2 is somehow being added to the solution. The script used to add it is: bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); Althou ...

javascriptjquery.netasp.net-mvcwebsocket

Error: Please provide the required client_id when setting up Google Sign-In with Next-Auth

I have been trying to implement the Sign in with Google option in my Next.js application using next-auth. Below is a snippet of my [...nextauth].js file located in the api/auth folder: import NextAuth from "next-auth"; import Google ...

javascriptnext.jsgoogle-oauthnext-auth

"Exploring the world of asynchronous computations in jQuery Ajax: The next steps post-GET

When using ajax in jQuery with the request type, URL, and success functions, I often receive a JSON response. However, I face the challenge of needing to reformat the JSON arrays into a different structure, which can be computationally expensive. I am seek ...

javascriptajaxjsonjqueryasynchronous

Performing an HTTP request to itself in NodeJS/ExpressJS

Currently coding an NPM module that requires making an HTTP request to itself, which is the running web server. Here's an example: let url = "http://127.0.0.1:" + (process.env.PORT || 3000) + path; request(url, function(error, response, body){ ... ...

javascriptnode.jsexpress

A function with a specific name for sorting a multidimensional object based on a specified sub-key's value, without anonymity

My data consists of a collection of objects, not an array: var people = {}; people['Zanny'] = {date: 447, last: 'Smith'}; people['Nancy'] = {date: 947, last: 'William'}; people['Jen'] = {date: 147, last: &a ...

javascriptsortingobject

angularjs: prioritize a specific div during the initial load of the controller

app.controller('homeCtrl', function($scope, $log, $location, $http, dataService, blockUI) { var self = $scope; self.init = function() { $log.info("home controller loaded"); $('html,body').animate({scrollTop: $("#services_div").o ...

angularjs

The vanishing act: Semantic UI menu disappears when you click

My objective is to create a persistent left-side menu using Semantic-UI. I want to implement two different states for the menu - one with text for each item and another with an image for each item. However, I am facing some challenges that have me complete ...

javascriptjqueryhtmlcsssemantic-ui

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

I have the following code snippet that allows me to display a pop-up either by clicking on the link or hovering over it. I am looking to modify it so that the pop-up opens when the page loads and restrict it to open only once per visitor per week. As some ...

javascripthtmlcssjquery

What is the method to obtain the URL parameter from the $routeProvider in AngularJS?

Here is an example of the code: $routeProvider.when('/devices-list', { templateUrl: 'Views/Layouts/devices-list.html', controller: 'deviceLibraryController' }); However, I am looking for a way to create a shortcut fo ...

angularjs

Leveraging AngularJS $filter in conjunction with ng-disabled

I have a variable in my $scope that contains information about an election, including a list of voters with unique IDs: $scope.election = { voters: [ { _id: '123' }, { _id: '456' }, { _id: '789' } ] } Additio ...

javascriptangularjs

Toggle the visibility of all elements using jQuery by creating multiple buttons for each action

I have a group of 4 buttons that control the visibility of images on the page. Each button toggles between showing and hiding all images when clicked. When a button is clicked, it changes its text from "HIDE ALL" to "DISPLAY ALL." The issue I'm facin ...

javascripthtmljquerybutton

Issue: Attempting to send a POST request to the specified API endpoint for creating a product category resulted in a 500 Internal Server Error

My current task involves inserting data into a table using the POST method with an Angular service function. angular.module("productCategoryModule") .factory("productCategoryService",productCategoryService); productCategoryService.$inject = ['$http& ...

mysqlangularjsnode.jsexpress

Error Message: SCRIPT5 - Permission Denied When Trying to Open PDF with Javascript

Despite searching through multiple posts on SO, I have yet to find a solution to my issue. We operate a web form within our LAN that utilizes Javascript's OPEN function to open PDF files. Up until recently, everything was working smoothly. However, ...

javascriptaccess-denied

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

Building an efficient form submission and validation process using MaterialUI and ReactJS

I recently made the switch from AntD to MaterialUI and I'm struggling with implementing form validation and submission without causing the entire page to reload. For example, when a user clicks "sign in" on a MaterialUI form, the whole page reloads, ...

javascriptreactjsformsmaterial-uimaterial-design