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

Should $http be called by the Service or the Controller - whose responsibility is it?

After an AJAX request is completed, the event.keyCode is not returning the key codes for the up and

Guide to directing a user through an Ajax call to a particular Controller and action

retrieve essential data from Firebase using JavaScript

Ways to eliminate all jQuery events (or avoid reinitializing multiple times)

"Responding to an Ajax request with a .NET Core server by sending an xlsx

In Angular, when a promise returns an "undefined" value, how does this interact with .NET

Utilizing useEffect Hooks to Filter Local JSON Data in React Applications

React Native Header Icon Not Showing on the Left Side

Is it possible to create a return using messageEmbed in Discord?

Is there a way to duplicate items similar to MS Word by using a combination of ctrl + mouse click +

Ways to display notifications when the user is not actively browsing the website?

Is there a way to update and save both dependencies and devDependencies with a single command in Npm?

Steps for relocating Express server (using MERN stack) to a subdirectory and functioning on Heroku

Is it possible to use just one <map> tag for multiple images in jQuery or JavaScript?

``There Seems to be an Issue with Loading Content in Tabs

What is the best way to incorporate bullet points into a textarea?

Modifying website elements with JavaScript

Click on the ng-click attribute to access the HTML page

Is there a way to automatically remove files from the "dist" directory when deleting the prototype from the "src" folder?