Update the content of a UI Bootstrap accordion group by clicking a button within the group above it

I have implemented this accordion component:

        <uib-accordion close-others="true">
            <uib-accordion-group heading="Action" is-open="true" class="text-center">
                <div class="btn-group text-center" data-toggle="buttons" >
                    <button type="button" class="btn" 
                        ng-repeat="action in actions" ng-model="$parent.selectedAction" uib-btn-radio="action"
                        ng-class="{'btn-danger custom-btn-danger': $index == 0, 'btn-success custom-btn-success': $index == 1}" >
                        {{action.text}}
                    </button>
                </div>
                {{selectedAction}}
            </uib-accordion-group>
            <uib-accordion-group heading="Confirm" is-open="true">
                <div ng-if="selectedAction.value == 'reject'">
                    Comments
                    <br />
                    <textarea cols="30" rows="5"></textarea>
                    <br />
                    <br />
                    <div class="text-center">
                        <input type="button" value="Reject" class="btn btn-danger active" />
                    </div>
                </div>
                <div ng-if="selectedAction.value == 'approve'">
                    <div class="text-center">
                        <div class="btn-group btn-group-vertical" data-toggle="buttons">
                            <button type="button" class="btn btn-primary custom-btn-primary"
                                ng-repeat="item in items" ng-model="$parent.selectedProcessLevel" uib-btn-radio="item"
                                ng-style="roundTopRight($index)">{{item.text}}</button>
                        </div>
                    </div>
                    <br />
                    Comments
                    <br />
                    <textarea cols="30" rows="5"></textarea>
                    <br />
                    <br />
                    <div class="text-center">
                        <input type="button" value="Approve" class="btn btn-success active" />
                    </div>
                </div>
            </uib-accordion-group>
        </uib-accordion>

Along with the following JavaScript code:

$scope.selectedAction = { value: 'approve', text: 'Approve', isOpen: false };

$scope.actions = [
    { value: 'reject', text: 'Reject', isOpen: true },
    { value: 'approve', text: 'Approve', isOpen: false },
];

$scope.selectedProcessLevel = { value: '2lp', text: '2 Level Process' };

$scope.processLevels = [
    { value: '1', text: 'One' },
    { value: '2', text: 'Two' },
    { value: '3', text: 'Three' },
];

$scope.roundTopRight = function (index) {
    if (index == 0)
        return { 'border-top-right-radius': '4px' };
}

I am trying to dynamically change the content of the second accordion group by clicking on the reject or approve buttons. Previously, I had a simple table which worked perfectly before implementing the UI Bootstrap accordion component.

Could there be a scope-related issue causing this behavior?

Additionally, how can I automatically collapse the action group and expand the confirm group by clicking on one of the buttons?

Thank you for your help.

cssangularjstwitter-bootstrapaccordionangular-ui-bootstrap

Answer №1

After some exploration, I discovered a simpler solution: I opted to use objects over primitives instead. After tweaking the code, here is the revised version for the buttons:

<button type="button" class="btn" 
    ng-repeat="action in actions" ng-model="selectedAction.value" uib-btn-radio="action.value"
    ng-class="{'btn-danger custom-btn-danger': $index == 0, 'btn-success custom-btn-success': $index == 1}" >
    {{action.text}}
</button>

Furthermore, I incorporated this ng-if statement:

<div ng-if="selectedAction.value == 'reject'">

Lastly, here is the snippet of the corresponding javascript:

$scope.selectedAction = { value: '' };

Answer №2

UPDATE: Let me show you a super simple example:

<div ng-controller="AccordionDemoCtrl">
  <uib-accordion close-others="false">
    <uib-accordion-group heading="First Accordion" is-open="true">
      <input type="text" class="form-control" ng-model="service.value" />
    </uib-accordion-group>
    <uib-accordion-group heading="Second Accordion" is-open="true">
      Service value: {{ service.value || 'no value set' }}
    </uib-accordion-group>
  </uib-accordion>
</div>

In response to your initial question, there is indeed a scoping challenge. In Angular, nested scopes usually inherit fields for objects and copy them for primitives. However, this behavior changes when using isolate scope directives, like in the <accordion-group> element - see the code.

But fear not! There are solutions. One effective approach is to create a service to hold shared values across accordion groups. This way, you can access these values from anywhere in your application, even within other <accordion-group> elements.

Addressing your second question, the solution is similar - toggling the is-open value triggers the opening and closing automatically.

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

Exploring the fundamentals of Angular.js: A comparison of Services, Factories, and Controllers along with Directives and Behavior

I recently came across an article discussing the use of directives, services and controllers in Angular. While it was informative and helpful, it left me feeling a bit lost about the best structure for an angular application. I could really use a sanity ch ...

angularjsarchitecturerequirejsangularjs-serviceangularjs-controller

Steps to eliminate a horizontal scrollbar

It appears that I am working with CSS 2.1 as the style "overflow-x" is not present in my code. In the snippet below, I have defined headings for a grid and set the Id "pageLength" to introduce a vertical scrollbar for the grid's contents. However, thi ...

css

The issue with CSS z-index not functioning properly when using absolute positioning

Here is the issue I'm facing: I have multiple div containers in my code. .outer { position: relative; z-index: 1; } .inner { position: absolute; z-index: 999; } <div class="outer"> <div class="inner"> <div class="option ...

htmlcsspositionz-index

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

javascriptjquerycssecmascript-6

Embedding videos in HTML

I am experiencing difficulties with embedding a video in my HTML file. I attempted to use a YouTube video, but when I open it in my browser, it displays an error message stating that the video is unavailable because YouTube has refused to connect. I also ...

htmlcss

Position the tables next to each other

I have utilized Bootstrap 4 to create two tables, showcasing specifications and earning statistics separately. Both tables are enclosed within a col-xs-6 class with the intention of aligning one table to the left and the other to the right. However, at pr ...

htmltwitter-bootstrapbootstrap-4

Is it feasible to save the outcome of a function call using ng-repeat?

Looking for a solution with the following code: <tbody ng-repeat="term in Items | filter:searchText track by term.Element"> <tr class="term-row"> <td ng-show="!IsValid(term)" class="text ...

angularjsfunctionangularjs-ng-repeat

Implement dynamic changes to CSS variable values using Typescript during runtime

My angular 4 web application requires dynamic styling based on color values and image URLs received from the backend. While I have successfully set up the app to load images from the server, handling color values poses a greater challenge. The primary colo ...

cssangulartypescript

Storing information in a Database using AngularJS and PHP

Seeking assistance with connecting Angular to a PHP database. I have successfully retrieved data in my Angular setup, but struggling to save it to the database. Here's the HTML code I'm using: <form ng-controller="AppCtrl" name="add_user"> ...

javascriptphpangularjsdatabase

Is there a way to automatically add a div to the window as the user scrolls and then hide the div when they scroll back to the

Seeking assistance with creating a function that will add a 'sticky' class to the menu when the user scrolls down to the middle, and then append a div when the 'sticky' class is present. Currently facing issues where the div keeps appen ...

javascriptjqueryhtmlcss

Is there a way to automate testing for my web application bundled with webpack against FUOC?

After creating a React + Redux web app bundled with webpack, I encountered a bundling error that caused my website to display flash of unstyled content (FUOC) behavior. Certain components did not inject their CSS into the server response, resulting in pa ...

cssnode.jstestingwebwebpack

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...

javascripthtmlangularjsfiltertype-conversion

Difficulty integrating custom CSS with Bootstrap framework

I attempted to incorporate a custom CSS file with my Bootstrap code, but unfortunately it does not seem to be functioning properly. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcssbootstrap-5

Aligning elements within a table to ensure consistency with surrounding content

Issue I am working with an html table that includes a particular column whose content can vary in size. This results in rows of varying heights, which is expected. However, the adjacent column to the variable-sized one contains two buttons that consistent ...

jqueryhtmlcss

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Can you assist me with this issue? I need to modify the code below so that the border color remains blue while a user selects an item from the UL LI list. Here is an image showing the current problem: https://i.sstatic.net/DS7hO.png And here is a pictu ...

htmlcssdom

Troubles arise when hovering over the <strong> tag and the <h4> element

While hovering over my h4 tag in the table, everything functions correctly. However, when I hover over the strong tag inside the h4 element, the strong tag inherits the same hover effect as the h4 tag. The structure of each td element within the table is ...

htmlcsshover

Accordion menu causing Javascript linking problem

After following a tutorial, I managed to create an accordion menu in JavaScript. In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis. Now, my query is this: How can I retain the link functio ...

javascriptjquerycssaccordion

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

challenges with positioning div elements using relative CSS styling

This is a section of my code: CSS : .body .left, .right { position:relative; z-index:6; display:inline-block; } .body .left { top:0; left:0; width:100px; height:300px; margin-right:10px; borde ...

htmlcss

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

First, I begin by creating an element: let link = document.createElement('a'); After my document is fully loaded and all styles and scripts are applied. The styles may look something like this: a { background-color: salmon; } Therefore, it w ...

javascriptcssdom