AngularJS allows you to hide an accordion if its sub-elements are filtered out

I have dynamically created an accordion using Angular.

Here is the code snippet:

<input type="text" class="form-control pull-left" ng-model="searchSingleField.title">

<accordion-group ng-repeat="category in categories">

    <li ng-repeat="resource in category.resources | filter:searchSingleField">

    </li>
</accordion-group>

The accordions are generated based on a list, and each accordion contains a sublist of elements. I am able to filter the elements inside the accordion using Angular filters, but I am having trouble managing the visibility of the primary accordion when the sublist of elements is completely filtered out.

Can anyone offer some assistance?

Thank you

angularjsfilteraccordionvisibilityangularjs-ng-repeat

Answer №1

Appreciate the solution provided!

This is how I approached it:

<accordion-group ng-repeat="category in categories" ng-show="(category.resources | filter:searchSingoloCampo).length>0">

Using this method, I manage the visibility of the main accordion when elements are filtered!

Many thanks!

Answer №2

To streamline this process, consider incorporating a new variable to contain the filtered array's contents. When the size of this array reaches 0, it would trigger the closure of the accordion. Here is an example implementation:

<accordion-group ng-repeat="category in categories" close-accodrion="filteredResources.length">
    <li ng-repeat="resource in filteredResources = (category.resources | filter:searchSingoloCampo)">
    </li>
</accordion-group>

The "close-accordion" attribute I included is hypothetical; I am uncertain about your method for closing the accordion-group. Assuming you can toggle its visibility with a boolean expression like filteredResources.length, you may also consider using ng-show or ng-hide for hiding purposes. The same principle applies.

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

Get the azure blob storage file in angular by downloading it

Can anyone provide guidance on how to download a wav file from Azure Blob storage using Angular for the purpose of playing it with wavesurfer.js? ...

angularjsazure-blob-storagewavesurfer.js

Angular Script Linking

Hello there! I am currently attempting to add an HTML tag to my response message, but for some reason it isn't working as expected. Here is a snippet of my controller code (in case the API indicates that the account doesn't exist - see this scr ...

javascripthtmlangularjs

Navigating to an AngularJS state through an email hyperlink

Trying to guide users from an email link to a specific state within my Angular app presents a challenge due to its single page nature, making direct URL redirection impossible. Past attempts involved utilizing URL parameters: The email includes this link ...

javascriptangularjsemailhttp-redirect

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!")&apo ...

javascriptangularjsionic-framework

Struggling to understand the usage of FormData and ngResource

I am currently facing an issue while trying to upload a file as MIME/multipart through AngularJS 1.6.4 and then sending it to an ASP.Net WebAPI. I came across a sample project that uses version 1.3.1, where the following code snippet works: var formData ...

angularjsngresource

Using kendo ng-delay in conjunction with a page refresh on a dropdownlist results in the list contents disappearing

As part of a learning exercise, I am in the process of rewriting a web app that originally used knockout and jQuery UI to now using kendo and angular. The issue I am facing involves a kendo-drop-down-list element that is populated with data from an ajax c ...

angularjskendo-ui

Camera with WebGL Rendering

As a newcomer to WebGL, I encountered an issue when incorporating a Camera object into my project. You can view my basic example on Fiddle, where I have a cube centered at (0, 0, 0) with walls drawn using Angular. The controls allow for camera movement an ...

angularjswebgl

Angular credit card filter with replacement

Looking for an easy method to display information in a credit card input field using angular1, such as: #### - #### - #### - #### ? Substitute the numbers with any symbols and insert "-" between every set of 4 numbers. ...

angularjsinputfilterformatting

New update to Angular Currency Filter - Now including Symbol Â!

While utilizing angular's currency filter, I noticed an unexpected extra symbol being outputted: Â. This is the HTML code: {{totals.subtotal | currency}} {{totals.tax | currency}} {{totals.total | currency}} The 'totals' object looks lik ...

angularjscurrency

What are the recommended tools for translating in Angular 2 - pipes or directives?

Currently in search of a solution that allows me to create my own translations to replace the translated text. I am trying to determine whether utilizing Pipes or Directives would be more advantageous in terms of performance, especially considering the lar ...

angularjstranslationangular-directiveangular-pipe

"Enhance your Angular experience with SweetAlert integration using directives and translation

Currently, I am utilizing the Angular implementation of the SweetAlert plugin from GitHub. I am attempting to pass an Angular directive with translation to the title. The variable being passed as the title is: {{ 'register.confirmation_modal.SUPERI ...

javascriptangularjsobjectangularjs-directiveangular-translate

Retrieving a value using forEach in protractor - Dealing with closures

I am facing an issue with the helper code below, as it is not returning the correct number of occurrences of a string. this.getActualFilteredStatusCount = function(strFilter){ return this.getTotalRows().then(function(count){ var totalCount = ...

javascriptangularjsnode.jsjasmineprotractor

How to integrate an AngularJS page into a Node application

Exploring the realm of single page web apps with node, angular, and jade has been an interesting journey for me as a newcomer to angular. I am currently faced with a dilemma regarding my app.js file - how can I ensure that my initial page template loads fr ...

node.jsangularjsexpresspug

Using filters to target children within the scope (AngularJS)

As a newcomer to AngularJS, I am currently working on a basic proof-of-concept project for my supervisor. The project involves creating listings for car hire, with results displayed in the main section of the view using external JSON data, and filters on t ...

angularjs

Innovative MainMenu featuring distinct subMenus created via ng-repeat and populated with data from JSON sources

I am attempting to utilize ng-repeat to dynamically load the main menu from a JSON file. Let me explain the situation. Please refer to the provided layout screenshot for better understanding Main Menu - Groceries, Listing, Product, Blog, Gallery, Pages, ...

angularjsjsonangularjs-ng-repeat

The process of retrieving information from JSON files through HTTP requests in AngularJS

After retrieving a JSON file of countries and successfully logging the data in the console, I encountered an issue where the data is not displaying in the HTML file. It appears fine in the console but refuses to print on the HTML page. So, how can I prop ...

angularjsjson

What are the potential reasons for the failure of multiple GET requests in a Protractor test

I'm currently running a protractor test in the Amazon EC2 environment using the PhantomJS browser. Although it is generally not recommended to use PhantomJS with Protractor, I have no other choice at the moment. The tests always run smoothly in a Win7 ...

angularjsphantomjsprotractor

What is the best way to combine two AngularJS apps on a single Express server?

I have scoured the internet to find solutions for my specific problem, but none seem to work quite right. I am attempting to serve two separate AngularJS apps based on incoming subdomains using express-subdomain with express. While the code seems to serve ...

angularjsnode.jsexpresssubdomain

Incorporating dynamic images into Laravel using Angular

I am currently trying to dynamically input the src value of an image using Angular. Below is the code I have written : HTML : <div ng-app="myApp" ng-controller="MyCtrl"> <img src="{{asset('assets/img/'.'/'. @{{ item.name ...

javascriptphpangularjslaravel

Loading content from external sources on the dashboard

I'm trying to figure out how to load an external URL () within the content of a Dashboard. My current code looks like this: .state('app.urlloading', { url: '/url-loading', controller:function($window){ $window.locat ...

angularjs