Filtering ng-repeat in AngularJs based on nested data properties

Within my data tracking appointments, I have information on months, weeks, days, and timeslots.

When it comes to the listing view, displaying "weeks" is unnecessary (although important for other reports).

To eliminate days without appointments, I can use the following filter:

<div ng-repeat="month in appointments.months: | filter:{????:''}">
  <div>{{month.name}}</div>
    <div ng-repeat="week in month.weeks"> <!--Omitting display for weeks-->
        <div ng-repeat="day in weeks.days | filter:{timeslots:''}">
    ....</div></div></div>

The filter "{timeslots:''}" successfully hides days without appointments.

In addition, I want to hide months without appointments. I've experimented with variations of |filter:{weeks.days.timeslots:''} without success.

Is there a way to perform a deep filter on values in angularjs, or do I need to create a custom filter?

Answer №1

A solution is available!

To match any property of an object or its nested properties, use the special property name $ (e.g., {$:"text"}). Additionally, you can negate the predicate by adding a ! before the string. For instance, {name: "!M"} will return items with a name property not containing "M".

Explore the explanation of the filter 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

Learn how to connect a Firebase account that was created using a phone number

✅ I have successfully implemented the feature that allows users to update their profile with a mobile number using verifyPhoneNumber and update currentUser.updatePhoneNumber ❌ However, a problem arises when a new user attempts to sign in with a phone ...

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

$scope.categories = [ { "advertiser_id": "2", "tier_id": 1, "tier_name": "1", "base_cpm_price": "", "retarget_cpm": "", "gender": "", "location": "", "ageblock1": "", "ageblock2": "", "ageblock3": ...

Implementing ng-show in the controller using $index variable

I have a list of items displayed using ng-repeat and I want to show the "Status" text next to an item when a certain event occurs, such as a click. I know I can use $index for this, but I'm struggling to understand how to implement it in the controlle ...

Demonstrate the proper implementation of a Stepper component using Material UI in a React.js

I am trying to display a responsive screen using "progressive forms" with React.js and Material Ui. I have implemented the Stepper component for this purpose, but when I click the "Next Button", the button is hidden but the next step content with the text ...

Guide on changing the background color of a specific row with pagination

https://i.stack.imgur.com/Q4ggc.png Currently, I'm implementing pagination on an array and need to highlight the rows with a count of zero. The count variable in each row can be accessed using {{x.count}}. I want to customize the background color fo ...

When is it necessary to use JSON.parse(JSON.stringify()) with a Buffer object?

I am currently working with Buffer objects in my existing code. let dataObject = JSON.parse(JSON.stringify(data)); At first glance, it seems like the above code is redundant and doesn't achieve much. However, replacing it with: let dataObject = data; ...

What is the process for importing a jquery plugin like turnjs into a React component?

After searching through countless posts on stackoverflow, it seems like there is no solution to my problem yet. So... I would like to integrate the following: into my react COMPONENT. -I attempted using the script tag in the html file, but react does no ...

designing the structure of directories and routes for express and angular applications

I'm new to using express and angular. After browsing through some answers in the forum, I stumbled upon the express angular seed project. My main question involves the directory structure and routing used in this seed project. In the angular seed ...

What is the best method for incorporating information into an existing object when it is currently empty?

When it comes to data removal, my method involves locating the element using findIndex and marking it as a null value in isInArray. However, if no such data exists, how can I add it to an empty element starting from the first one? For instance, if the fi ...

Breaking down and analyzing XML information

I have data that I need to retrieve from an XML file, split the result, parse it, and display it in an HTML element. Here is a snippet of the XML file: <Root> <Foo> <Bar> <BarType>Green</BarType> &l ...

The slideUp function is not functioning as expected

I am trying to implement a slideUp effect on my webpage. Here is the code within my <body> tag: <script> $('#slide_up').click(function(){ $('p.text_study').slideUp('slow', function() { $ ...

Service for Posting in Angular

I am looking to enhance my HTTP POST request by using a service that can access data from my PHP API. One challenge I am facing is figuring out how to incorporate user input data into the services' functionality. Take a look at the following code snip ...

When using Magento, pasting the same link into the browser produces a different outcome than clicking on window.location - specifically when trying to add items to the

I'm in the process of setting up a Magento category page that allows users to add configurable products directly from the category page, which is not the standard operation for Magento. After putting in a lot of effort, I have almost completed the ta ...

Showing information in a table on a webpage using JavaScript and HTML

After running a console log, I am presented with the following data: 0: {smname: "thor", sim: "9976680249", pondo: "10"} 1: {smname: "asd", sim: "9999999999", pondo: "0"} 2: {smname: "asd", sim: "4444444444", pondo: "0"} 3: {smname: "bcvb", sim: "78678967 ...

Using jQuery, how can I add value to every input when the option is changed?

I need help changing the values of all input:text elements based on selections from a select menu. Specifically, I want to change only the matched td.class values from the data-pset attribute inside the <select>. As a beginner in jQuery, I can only ...

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

Looking for assistance with transferring API information to components

I am currently working on a basic Movie finder application that will display a list of movies containing the name entered by the user. My focus at this stage is to just show the information on the screen. As I'm using React for this project, I have t ...

Limiting input to specific characters is effective on Chrome, but unfortunately does not function on Firefox

This code snippet is designed to restrict user input to lowercase letters from a-z, numbers from 0-9, and the dash character "-". While it functions correctly in Chrome, it does not allow any input in Firefox. What could be causing this issue? $('#sl ...

Leaving the "OK" button untouched in the sweet alert dialog

While implementing sweet alert in my project, I encountered an issue where the button text was not changing and the cancel button was missing on some pages. On certain pages, it only displayed OK. You can see a screenshot below for reference. https://i.s ...

Encountering a 404 error with Next.js 13 dynamic routing

Whenever I click on an item, it redirects to the dynamic route "http://localhost:3000/products/{id}" but instead of displaying the data, I get an error. Here is my file structure: app components Product.js pages Products [id].js layou ...