Tips for keeping the most recently opened accordion in a group by using the is-open attribute to call a function

I have a dynamically populated accordion that updates every 15 seconds. I need to keep track of the last opened accordion group as the dataList can be very large and parsing it for each update is not feasible.

Below is the code snippet from my HTML file:

<accordion-group ng-repeat="data in dataList" is-open="isAccordionOpen(data.dataName)">
            <accordion-heading> 
                <span ng-click="openedAccordionGroup(data.dataName)" class="accordionSpan"><b>{{data.dataName}}</b></span>
            </accordion-heading>
</accordion-group>

And here is the corresponding JavaScript code:

$scope.openedAccordionName = '';
$scope.isAccordionOpen = function(name){
    return $scope.openedAccordionName === name;
};
$scope.openedAccordionGroup = function(name) {
    $scope.openedAccordionName = name;
};

However, when I run this code, I encounter a JavaScript error:

Error: [$compile:nonassign] Expression 'isAccordionOpen(data.dataName)' used with directive 'accordionGroup' is non-assignable!

What am I doing wrong in the above code?

Answer №1

It's not possible to achieve that with Angular because it requires a 2-way binding variable. However, you can keep track of the last opened item by using track by in your ng-repeat. This way, Angular will update the existing element's scope instead of recreating the DOM element.

In this example, I am tracking accordions by their unique IDs:

<accordion-group ng-repeat="data in dataList  track by data.id" is-open="isOpen">

Plnkr

If no track by is provided, Angular will add a unique id $$hashKey for repeated elements. By using track by, you will notice performance improvements. You can use any unique key as the track by value (like dataName if it's unique).

In this example, even after refreshing the data, the last accordion remains open because the isOpen property is added to the child scope of the repeated element. Angular only updates the data based on the ID without recreating the accordion.

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

Verify whether the items within the ng-repeat directive already contain the specified value

I am facing an issue with displaying a JSON string of questions and answers in ng-repeat. The problem is that I want to display each question only once, but show all the multiple answers within ng-repeat. {Answer:"White",AnswerID:967,answer_type:"RADIO",f ...

Code for asynchronous routing in Node.js

My current setup involves using node with express version 4.0, and I've noticed a lack of information online (including in the documentation) regarding embedding asynchronous code within a route. With middleware, it's straightforward: app.use(& ...

Will the useEffect hook re-run whenever the component renders if it includes props in its dependency array?

According to the React documentation on useEffect, it is recommended to include props in the dependency array of useEffect: import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) ...

Having trouble accessing a parsed JSON value in Node.js, encountering 1 error

Currently, I am working on creating a simple news web application as a way to practice utilizing APIs. The particular API that I have chosen for this project is . If you take a look at this JSON object that I am attempting to console.log, you will see the ...

Navigate through a list of data in JSON format

After successfully implementing a jQuery AJAX call, I encountered difficulty in parsing the returned value. Working with a MySQL database, I am returning a PHP array() to my jQuery AJAX function using echo json_encode($reservationArray); Upon appending th ...

The parameter "file" needs to be a string data type, but npm run deploy to gh-pages received an undefined data type instead

I encountered an error while attempting to deploy a react application to gh-pages. Despite having successfully done it in the past, this is the first time I am facing this specific issue. The error message reads: The "file" argument must be of type string ...

What is the best method for returning the AJAX outcome to the JSP page?

Using AJAX, I am able to post data from my JSP page to my servlet. $.ajax({ url: 'myServlet?action=FEP', type: 'post', data: {machine: i, name: txt}, // where i and txt hold certain values success: f ...

Is it possible to use both MUI makeStyles and Theming in the _app.js file?

I've been working on a complex navigation component using MUI Persistent Drawers within a React + Next.js setup. To achieve the desired content shrinking effect based on state changes, I ended up placing the entire navigation system inside the _app.js ...

Encountering difficulties in loading my personal components within angular2 framework

I encountered an issue while trying to load the component located at 'app/shared/lookup/lookup.component.ts' from 'app/associate/abc.component.ts' Folder Structure https://i.stack.imgur.com/sZwvK.jpg Error Message https://i.stack.img ...

Activate the drop-down menu in Angular 6 by hovering over it with your mouse

I am just beginning my journey with Angular 6 and Bootstrap. Currently, I am working on a Navigation bar that consists of 3 navigation items. One of the nav items is called "Store", and when a user hovers their mouse over it, I want to display a mega menu ...

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

When I place this in the js directory, the function does not seem to function properly

I have an add.ctp file where I can add multiple rows. However, when I place the addNumber function in app/webroot/js, it does not work. Why is that? Here is a snippet from my view file (add.ctp): <table id="mytable"> <tr id="number0" sty ...

Managing asynchronous data using rxjs

I created a loginComponent that is responsible for receiving an email and password from the user, then making an HTTP request to retrieve the user data. My goal is to utilize this user data in other components through a service. Here is the login componen ...

Exploring the functionalities of PointerLockControls, incorporating WASD controls, and experimenting with Three.js

Forgive me if this is a beginner question, but I've noticed that in the official three.js examples, the PointerLockControls.js allows for mouse pointer lock and WASD key navigation. I have successfully locked the mouse pointer, but I am having troubl ...

What is the mechanism behind declaring a function using square brackets in Node.js/Javascript?

Encountering something new while working with Node.js - a unique way of declaring functions. You can find an example at this link. 'use strict'; const Actions = { ONE: 'one', TWO: 'two', THREE: 'three' }; clas ...

Tips on showing an api call response in Reactjs

I am a beginner in Reactjs and currently working with nextjs. I have been trying to integrate a "newsletter" feature into my project. I have created a component for this which is functioning properly. However, I am facing an issue with displaying the "succ ...

Guide to importing the Slider Component in React using Material-UI

I am trying to incorporate the Slider Component from @material-ui/core into my React project. However, when I attempt to import the Slider using this code: import Slider from '@material-ui/lab/Slider';, it gives me an error stating Module not fou ...

Uploading files and data in Laravel using Vue.js and Vuetify: A step-by-step guide

My Vuetify form is working fine with text input, but when I try to include images, I encounter the error GET http://danza.test/thumbnails[object%20File] 404 (Not Found). How can I successfully pass both text and images in a form? This is part of the code ...

Order of execution for setImmediate() and setTimeout() callbacks compared to I/O callbacks

In the world of Node.js, the event loop powered by libuv is divided into specific phases. The poll phase is where we wait for I/O tasks to complete before running their associated callbacks. The length of this waiting period is determined by timers, timeou ...

When the app loads in AngularJS, make sure to call the jQuery plugin. Additionally, remember to call

In my AngularJS app, I have a need to call the following code: $('.nano').nanoScroller({ alwaysVisible: true }); This should be executed when the application loads and also when the state changes. In traditional non-angular applications, I wou ...