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

Adding optional properties to TypeScript interfaces

As discussed in this post, the optional ? operator is commonly used to indicate that a function parameter can be omitted. But what is the significance of the ? operator when it appears on interface parameters? For instance, consider the following TypeScrip ...

javascriptangulartypescript

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements. In my vie ...

javascriptangularjsarraysjsonangularjs-ng-repeat

Tips for assigning a default value when an error occurs

Currently diving into the world of React and experimenting with rendering 10 pieces of data from a specific API. After crafting a function to iterate through the fetched information, extracting the title and image has been quite the challenge: for (let ...

javascriptreactjs

Saving a PHP form with multiple entries automatically and storing it in a mysqli database using Ajax

My form includes multiple tabs, each containing various items such as textboxes, radio buttons, and drop-down boxes. I need to save the content either after 15 seconds of idle time or when the user clicks on the submit button. All tab content will be saved ...

javascriptjqueryhtmlajax

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... Unfortunately, the assigned value does not show on the front end. I am aware that we can set a defaul ...

javascriptjqueryhtmljquery-uidatepicker

Creating a reusable function for making HTTP requests in Angular

I have a scenario in my controller.js where I need to make an HTTP GET request when the page loads and when the user pulls to refresh. Currently, I find myself duplicating the $http code. Is there a way to refactor this for reusability? I'm struggling ...

javascriptangularjs

Struggling with customizing the style of react mui-datatables version 4

Currently, I am utilizing "mui-datatables": "^4.2.2", "@mui/material": "^5.6.1", and have attempted to customize the styling in the following manner: Refer to the Customize Styling official documentation for more details // CUSTOMIZING MUI DATATABLES imp ...

javascriptreactjsmaterial-uimui-datatable

What is the best way to create a React filter utilizing the Autocomplete component from MaterialUI and incorporating state management?

I am currently in the process of creating a filter using the Autocomplete component from MaterialUI. As I select options from the dropdown menu, several things are happening: The Autocomplete automatically adds the selected options to the Chip Array. The ...

javascriptreactjsmaterial-uireact-props

Is there a way to confirm whether or not two files are identical?

Is there a reliable method to determine if two files are identical? I've been using a solution that involves downloading the first part of each file, converting the data to base64, and then comparing them. However, I've encountered an issue wher ...

javascriptnode.jsexpress

Updating another component when an input value changes in React

I am currently learning React and I am facing a challenge in updating a component based on an input value. Previously, I had successfully done this using HTML and vanilla JavaScript. Now, I am trying to achieve the same functionality in React but encounter ...

javascriptreactjs

Once you name the ng-app, it causes the code to malfunction

My application is functioning properly without any specified ng-app name, yet when I try to assign it a name in Angular, it does not work as expected. I am using Angular version 1.2.6. Here is an example of my code: index.html <!doctype html> <h ...

angularjs

Only a singular operation is carried out

Contained within my .js file are two functions: function download510(form) { if (form.pass.value=="tokheim") { location="../pdf/quantium-510.pdf" } else { alert("Invalid Password") } }; function download410(for ...

phpjavascript

The base64 conversion for the image is overflowing from the upload image field in react-draft-wysiwyg

I have a functional react-draft-wysiwyg editor application that allows me to add images. However, I am currently encountering an issue which is detailed below: https://i.stack.imgur.com/HTjAc.png This is the code snippet of what I have attempted so far. ...

javascriptreactjsdraftjsreact-draft-wysiwyg

Automatically refreshing controller functionality in CodeIgniter

Greetings everyone, I'm looking for a way to automatically refresh a controller function every 5 seconds. Currently, I am using header('Refresh: 10.2'); within the controller function like this: public function delete() { heade ...

javascriptphpjqueryajaxcodeigniter

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

In my current project, I am fetching a random document from a MongoDB Collection and attempting to showcase all the fields of that document in HTML. Although I can successfully retrieve a random document, the issue arises when trying to display its fields ...

javascripthtmlmongodbmeteor

What steps do I need to follow to create a controller component for a Form Element

I am trying to create a dynamic controller component in React Native, but I am facing issues with accessing errors. I am using "react-hook-form" for form elements. Here is my component: const { control, handleSubmit, formState: {errors}, ...

javascriptandroidreactjsreact-native

When Infinite Scroll is integrated into another file with HTML tags stacked on top, it will not load additional posts when scrolling down

I have implemented an Infinite Scroll feature that dynamically loads more data from a database as users scroll to the bottom of the page. However, I encountered an issue when trying to include this functionality in another .PHP file. If I insert any HTML ...

javascriptphp

Unable to execute multiple instances of Selenium PhantomJS concurrently

I have encountered an issue while using Selenium's node.js API to run PhantomJS instances against a series of web pages. The code that I have written to perform actions on the pages is functioning correctly, but it appears that only one instance of Se ...

javascriptnode.jsseleniumselenium-webdriverphantomjs

Applying multiple select filters in AngularJS to refine a scope

Check out my fiddle example here: http://jsfiddle.net/mwrLc/12/ <div ng-controller="MyCtrl"> <select ng-model="searchCountries" ng-options="cc.country for cc in countriesList | orderBy:'country'"> <option value="">Country ...

selectfilterangularjscontrollerscope

I am having trouble getting my console.log function to work properly on my HTML page

As a beginner in JavaScript, I am facing an issue with my console.log not working at all. When I type a console.log message, nothing shows up on my HTML page. I have tried to debug it, but being a newbie, I lack the necessary knowledge. All I can do is see ...

javascripthtml