Collapse the accordion when the search query is less than or equal to 0

I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together.

If I use this code:

<accordion-group is-open="status.open" ng-repeat="cat in cats | filter: query">

The accordion only opens when clicked, and if I use this code:

<accordion-group is-open="query.length > 0" ng-repeat="cat in cats | filter: query">

The accordion only opens after a search has been performed by the user.

Is there a way to combine these two conditions? I tried the following code but it didn't work:

<accordion-group is-open="query.length > 0 || status.open" ng-repeat="cat in cats | filter: query">

You can view my code on jsfiddle here.

javascriptangularjs

Answer №1

To properly set up the controller, you must include the following code:

$scope.$watch("query",function(newv){
    if(newv != undefined){
        if(newv.length > 0){
               $scope.open = true;
               $scope.$apply;
        }else{
               $scope.open = false;
               $scope.$apply;
        }
     }   

});

Additionally, make sure to add the accordion tag in your HTML:

<accordion-group is-open="open" ng-repeat="cat in cats | filter: query">
            <accordion-heading style="padding:0px;"> <i class="glyphicon" ng-class="{'glyphicon-minus': open, 'glyphicon-plus': !open}"></i>&nbsp;&nbsp;{{cat.title}}</accordion-heading>

If you'd like to see a working example, check out this fiddle http://jsfiddle.net/0ynqomrt/

Answer №2

I'm having some trouble with your jsfiddle accordions. They don't seem to be functioning properly...

It seems like the key is to connect the is-open attribute to a variable within your controller scope. Since the accordion-group creates its own scope, you may want to try something like this:

<accordion-group heading="DOGS" is-open="$parent.showMe">

Take a look at this plunker for a better idea of what I mean. It might not be exactly what you're looking for, but hopefully it will point you in the right direction?

http://plnkr.co/edit/qEo6z1tUiBsxpqWD?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

Using the $http.post function in AngularJS to pass an array of objects is not successful

I need to send an array of objects from my main merchandise.php file to another PHP file called process_cart.php using the AngularJS $http.post method. I plan to use a foreach loop in the receiving file to display the contents of the cart. Below is how my ...

phpangularjshttp

a function that repeats every single second

A challenge I am facing is creating a countdown timer with a time that refreshes every second. My current implementation uses setInterval, but it only seems to run once instead of every second. Can anyone help me identify the issue in my code? var countDo ...

javascriptjquery

Tips for filtering data using an array within an object containing arrays

Below is the provided information: userRoom = ['rm1']; data = [{ name: 'building 1', building: [{ room: 'rm1', name: 'Room 1' },{ room: 'rm2', name: ' ...

javascripttypescript

Break up every word into its own separate <span>

I am currently facing an issue with displaying an array of strings in HTML using spans. These spans are wrapped inside a contenteditable div. The problem arises when a user tries to add new words, as the browser tends to add them to the nearest existing sp ...

javascriptangulartypescript

What steps can be taken to safeguard the title of the document in the top window from being altered by any iframe or script?

My typical approach is to delete and redefine the title property like in the code snippet below: if (delete document.title) { Object.defineProperty(document, 'title', { get: getter, set: setter, enumerable: true, ...

javascripthtml

Removing multiple data rows in JSP using AJAX by selecting check boxes

I have a requirement where I need to store a list of objects (each with a unique id) as a session parameter. These objects are then displayed in a table in a JSP using JSTL. <c:forEach var="list" items="${PlayerList}"> <tr> <td> ...

javascriptjavaajaxjspservlets

React fails to recognize the key prop

When creating a list of TSX elements, I utilized the following code: this.productsModel = this.state.products.map(o => ( <Grid.Column key> However, I encountered a warning from React: Warning: Each child in a list should have ...

javascriptreactjs

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

javascripthtmljquerycss

Navigating the intricacies of retrieving network errors within an AngularJS application requires a deep

I've encountered the following code snippet in abcd.js: $http({url: 'some url' , method: 'POST', data: , headers: {} }).then(function(response)) { ............. }, function error(response) { .............. }) When an error occurs ...

javascriptphpangularjs

Having trouble accessing cookies in JavaScript on Internet Explorer 11?

I am facing an issue with my Angular application where cookies are not being read properly in Internet Explorer 11. The JavaScript code works fine on Chrome, but IE seems to be having trouble accessing the cookie data even though it is visible in the devel ...

javascriptc#.netangularjscookies

Using a Vue component to send a form for submitting data into the backend database of a Django application

Where should the connection between a form within a Vue component and a Django backend be established? In my frontend, I am utilizing VueJS where my primary component can retrieve data from a JSON file through an API specified in my Django view and URL fi ...

javascriptpythondjangovue.js

What is the best way to retrieve the total number of nested objects within an object?

I'm trying to figure out how to get the number of nested objects in the object a. a = { firstNested: { name: 'George' } secondNested: { name: 'James' } } I thought about using .length, which is typ ...

javascript

Can you define the type of binding value in AngularJS 1.5(6) using TypeScript?

I am looking to define the type of binding items so that I am able to utilize components similar to functions. For instance, consider a component: angular.module('app').component('navBar', new NavBar()); class NavBar{ public bin ...

angularjstypescript

Using AngularJS to dynamically load content into Owl Carousel 2

I'm having trouble loading the owl carousel in angularjs dynamic content. Here is the modified html code I am using: <div id="Galeria" owlcarousel class="youplay-carousel gallery-popup"> <a class="angled-img" href="http://www.youtube. ...

javascriptangularjsangularjs-directiveowl-carousel-2

Employing the html.validationmessagefor to display a client-side error notification

My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...

javascriptjqueryhtmlasp.net-mvcclient-side-validation

Tips for ensuring the drop down button remains selected

My goal is to keep the sorting drop-down button selected after clicking on it, instead of resetting back to "All". Below are my HTML, CSS, and jQuery code. You can view the functionality on my website here: jQuery/Javascript: $(document).ready(function($ ...

javascriptjquery

Optimize Date Formatting within a React Application Using Material UI Data Grid

I am currently working with MUI Data Grid Pro and I have an issue with filtering dates in the format dd-mm-yyyy. While the dates are displayed correctly in the columns, the filtering defaults back to mm-dd-yyyy. https://i.stack.imgur.com/Ue12K.png For mo ...

javascriptreactjsecmascript-6material-ui

Node and Web scraping Promise: a powerful combination

I've been using Cheerio and Node for web scraping, and I thought implementing promises could simplify handling asynchronous code. However, my attempt to chain promises hasn't been successful. Below is the code I'm working with, in hopes that ...

javascriptnode.js

The Ultimate Guide for Formatting JSON Data from Firebase

I'm facing an issue with parsing JSON data returned by Firebase. Here is the JSON snippet: { "-JxJZRHk8_azx0aG0WDk": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda6a68daaa0aca4a1e3aea2a0">[email&# ...

javascriptjsonfirebaseionic-framework

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

javascripthtmlcssvue.js