Guide to creating nested collapsing rows in AngularJS

Question

Guide to creating nested collapsing rows in AngularJS

My attempt to implement expand and collapse functionality in AngularJS for a section is not yielding the desired result.

To demonstrate, I created a simple demo of collapsible/expandable sections in AngularJS which works fine. You can view it here. The example showcases the functionality with a collapsible/expandable first row.

I then applied the same concept to another example where I have a table with different sections such as GENERAL_INFORMATION and USER_INFORMATION that I want to collapse/expand. My code for this can be found here.

<tr ng-repeat="(key, value) in name">
    <uib-accordion>
      <div uib-accordion-group class="panel-default" is-open="status.open">
          <uib-accordion-heading>

            <td ng-if="value.type == 'LABEL'" colspan="2" style="background: #777; color: white;">
                {{key}}
            </td>
          </uib-accordion-heading>
      </div>
   </uib-accordion>

    <td ng-if="value.type == 'FIELD'">{{key}}
        <span ng-if="value.required">
            <sup class="required">*</sup>
        </span>
    </td>
    <td ng-if="value.type == 'FIELD'"
    >
        {{value.value}}
    </td>      
</tr>

Any suggestions on how to improve this implementation?

javascript angularjs

Answer 1

Answer №1

By utilizing foundational AngularJS techniques, you can achieve the desired effect by combining ng-if with a toggleable show variable.

If you have multiple heading and content pairings, an array of show can be used to accomplish this.

This code snippet showcases the basic approach. However, for a cleaner implementation, consider encapsulating the functionality in a directive similar to the uib-accordion.

angular.module('myApp', ['ngAnimate'])
  .controller('myController', ['$scope', function($scope) {
    $scope.show = [];
    $scope.show[0] = false;
    $scope.show[1] = false;

    $scope.toggle = function(index) {
      $scope.show[index] = !$scope.show[index];
    };
  }]);

table {
  width: 100%;
}

.heading {
  height: 48px;
  background-color: #555;
  color: #fff;
  cursor: pointer;
}

.content {
  background-color: #eee;
  height: 150px;
  transition: all 3s ease-out;
}


/* The initial CSS styles for the enter animation */

.fade.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}


/* The final CSS styles for the enter animation */

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js"></script>

<div ng-app="myApp">
  <table ng-controller="myController">
    <tr class="heading">
      <td ng-click="toggle(0)">
        Heading
      </td>
    </tr>
    <tr ng-if="show[0]" class="fade">
      <td class="content">
        Content
      </td>
    </tr>
    <tr class="heading">
      <td ng-click="toggle(1)">
        Heading
      </td>
    </tr>
    <tr ng-if="show[1]" class="fade">
      <td class="content">
        Content
      </td>
    </tr>
  </table>
</div>

Answer 2

By utilizing foundational AngularJS techniques, you can achieve the desired effect by combining ng-if with a toggleable show variable.

If you have multiple heading and content pairings, an array of show can be used to accomplish this.

This code snippet showcases the basic approach. However, for a cleaner implementation, consider encapsulating the functionality in a directive similar to the uib-accordion.

angular.module('myApp', ['ngAnimate'])
  .controller('myController', ['$scope', function($scope) {
    $scope.show = [];
    $scope.show[0] = false;
    $scope.show[1] = false;

    $scope.toggle = function(index) {
      $scope.show[index] = !$scope.show[index];
    };
  }]);

table {
  width: 100%;
}

.heading {
  height: 48px;
  background-color: #555;
  color: #fff;
  cursor: pointer;
}

.content {
  background-color: #eee;
  height: 150px;
  transition: all 3s ease-out;
}


/* The initial CSS styles for the enter animation */

.fade.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}


/* The final CSS styles for the enter animation */

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js"></script>

<div ng-app="myApp">
  <table ng-controller="myController">
    <tr class="heading">
      <td ng-click="toggle(0)">
        Heading
      </td>
    </tr>
    <tr ng-if="show[0]" class="fade">
      <td class="content">
        Content
      </td>
    </tr>
    <tr class="heading">
      <td ng-click="toggle(1)">
        Heading
      </td>
    </tr>
    <tr ng-if="show[1]" class="fade">
      <td class="content">
        Content
      </td>
    </tr>
  </table>
</div>

Guide to creating nested collapsing rows in AngularJS

Answer №1

Similar questions

FInding the inner value of a Vuetify chip

Issues persist with Ajax form submissions; the submitted data never seems to go through

Moving information from Ajax to PHP

Creating a feature in Angular JS that allows for each item in a list to be toggled individually

Generate a sequence of years without relying on the range function

JSFiddle Functioning Properly, But Documents Are Not Loading

The synchronization between jQuery's onLoad and onDomready functions allows for seamless

Verify whether a variable includes the tag name "img."

Retrieve an element generated by a React script without using the ref attribute

What could be the reason for JavaScript code successfully exporting to Excel using the old office extension .xls but encountering issues when trying to export

HighCharts: visualize vertical stacked bars displaying the distribution of percentages within each stack

Avoiding repetition in json array using reactjs with the help of axios

What is the best way to pass the index value of a v-for loop as an argument to a computed property function in Vue?

Creating a customizable range input for pixel values: a step-by-step guide

The value from the angular UI bootstrap datepicker is unavailable when using a JQuery expression

Denied access to [Any Url] as it breaches the specified Content Security Policy directive and refused to connect

Choosing the Active Browser Tab while Modal is Open in Angular

Is there a way to begin using the :nth-child() selector from the last element instead of the first?

Margin ambiguity in a vue.js application

Invoke a function in Angular when the value of a textarea is altered using JavaScript