Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Question

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Struggling with a challenge for two days now, I have attempted to implement a panel-box using bootstrap and AngularJS. Within the confines of a controller, my code looks like this:

<div id="menu2a">
  <div class="panel list-group">
    <div class="list-group-item"><b>Panel Title</b></div>
    <div class="panel-body" data-toggle = "collapse" data-target = '#1' 
         title = "click for more information">
      <span
            class="glyphicon glyphicon-chevron-down pull-right"></span>
      <ul>
        <li data-ng-repeat="element in UnknownSizeArray">
          <i>{{$index + 1}}) {{element}}</i>
        </li>

      </ul>
      <div style = "padding-left:40px" id="1" class = "collapse">
        <br>
        <p> More information here..</p>
      </div>

    </div>

  </div>
</div>

The content to display is stored in UnknownSizeArray and is passed from an Angular controller to the HTML page.

My current obstacles include:

Implementing collapsibility based on the amount of content (e.g. show additional elements in the collapsible box if over 5 array elements).
Removing the chevron glyphicon when collapsibility is not needed.
Adjusting the height of the panel-body to accommodate 3-5 elements without collapsing.

How can I address these challenges efficiently?

Attempts using jQuery's .css() and .attr() functions in a JavaScript file, along with data-ng-init = "test()", did not yield the desired results. See below one of the attempts made:

$scope.test = function() {
  var array = $scope.UnknownSizeArray;

  if (array.length > 5) {
    $(".panel-body").attr("data-toggle","collapse");
  };
};

Why didn't this approach work, and what would be a more suitable solution?

javascript jquery html css angularjs

Answer 1

Answer №1

If you haven't already, consider using addclass(), removeClass() or toggleClass(). These methods are effective for handling the task.

<div class="panel-body collapse">
     title = "click for more information">
  <span
        class="glyphicon glyphicon-chevron-down pull-right"></span>         
  <ul>
    <li data-ng-repeat="element in UnknownSizeArray">
      <i>{{$index + 1}}) {{element}}</i>
    </li>

  </ul>                         
  <div style = "padding-left:40px" id="1" class="collapse">
    <br>
    <p> More information here..</p>
  </div>

</div>

<!-- Angular script // Inside of it module -->
$scope.test = function() {
var array = $scope.UnknownSizeArray;

  if (array.length > 5) {

    $(".panel-body").addClass(".collapse");

  } else {
    // maybe the array changes and you want to go trough this function again
    $(".panel-body").removeClass(".collapse");
  }
};

Also, pay attention to spacing in your HTML code, such as in line 4. In case the original code appears like that (it can happen), jQuery may not be able to detect and modify the element correctly. ;)

4   <div class="panel-body" data-toggle = "collapse" data-target = '#1'

Answer 2

If you haven't already, consider using addclass(), removeClass() or toggleClass(). These methods are effective for handling the task.

<div class="panel-body collapse">
     title = "click for more information">
  <span
        class="glyphicon glyphicon-chevron-down pull-right"></span>         
  <ul>
    <li data-ng-repeat="element in UnknownSizeArray">
      <i>{{$index + 1}}) {{element}}</i>
    </li>

  </ul>                         
  <div style = "padding-left:40px" id="1" class="collapse">
    <br>
    <p> More information here..</p>
  </div>

</div>

<!-- Angular script // Inside of it module -->
$scope.test = function() {
var array = $scope.UnknownSizeArray;

  if (array.length > 5) {

    $(".panel-body").addClass(".collapse");

  } else {
    // maybe the array changes and you want to go trough this function again
    $(".panel-body").removeClass(".collapse");
  }
};

Also, pay attention to spacing in your HTML code, such as in line 4. In case the original code appears like that (it can happen), jQuery may not be able to detect and modify the element correctly. ;)

4   <div class="panel-body" data-toggle = "collapse" data-target = '#1'

Answer 3

Answer №2

If you're looking for a solution, check out this jsfiddle.

var myApp = angular.module("myApp", []);


myApp.controller("myCtrl", function($scope) {
  $scope.UnknownSizeArray = [];
  $scope.limit = 5;
  for (var i = 0; i < 100; i++) {
    $scope.UnknownSizeArray.push(i);
  }
  $scope.expandAll = function(){
   $scope.limit = $scope.UnknownSizeArray.length;
  }
   $scope.expandNext5 = function(){
   $scope.limit += 5;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div id="menu2a">
    <div class="panel list-group">
      <div class="list-group-item"><b>Panel Title</b></div>
      <div class="panel-body" data-toggle="collapse" data-target='#1' title="click for more information">
        <span class="glyphicon glyphicon-chevron-down pull-right"></span>
        <ul>
          <li data-ng-repeat="element in UnknownSizeArray|limitTo:limit">
            <i>{{$index + 1}}) {{element}}</i>
          </li>

        </ul>
        <div ng-if="limit<UnknownSizeArray.length">
          <br>
          <button ng-click="expandAll()"> Expand all</button>
          <button ng-click="expandNext5()"> Expand next 5</button>
        </div>

      </div>

    </div>
  </div>
</body>

Answer 4

If you're looking for a solution, check out this jsfiddle.

var myApp = angular.module("myApp", []);


myApp.controller("myCtrl", function($scope) {
  $scope.UnknownSizeArray = [];
  $scope.limit = 5;
  for (var i = 0; i < 100; i++) {
    $scope.UnknownSizeArray.push(i);
  }
  $scope.expandAll = function(){
   $scope.limit = $scope.UnknownSizeArray.length;
  }
   $scope.expandNext5 = function(){
   $scope.limit += 5;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div id="menu2a">
    <div class="panel list-group">
      <div class="list-group-item"><b>Panel Title</b></div>
      <div class="panel-body" data-toggle="collapse" data-target='#1' title="click for more information">
        <span class="glyphicon glyphicon-chevron-down pull-right"></span>
        <ul>
          <li data-ng-repeat="element in UnknownSizeArray|limitTo:limit">
            <i>{{$index + 1}}) {{element}}</i>
          </li>

        </ul>
        <div ng-if="limit<UnknownSizeArray.length">
          <br>
          <button ng-click="expandAll()"> Expand all</button>
          <button ng-click="expandNext5()"> Expand next 5</button>
        </div>

      </div>

    </div>
  </div>
</body>

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Answer №1

Answer №2

Similar questions

Switching perspective in express with Pug

The issue of responsive spacing (such as mb-lg-2 mb-sm-3, etc) not functioning as expected has been identified in Bootstrap

What is the best way to manually decrease the speed of an object's rotation using javascript?

What could be causing my React Router component to display incorrect styling?

Angular dropdown filtering techniques

Don't let noise linger in the background unnoticed

Using angular-http-auth along with the $http transformResponse option allows for secure

Issue encountered with the openpgpjs example: `'The function openpgp.encrypt is not defined'`

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Tips for personalizing the error message displayed on Webpack's overlay

Exploring the documentation of JQuery's $.Ajax Function

Node.js used to create animated gif with unique background image

What is the best way to show an on/off button in an HTML page when it loads, based on a value stored in a MySQL database?

Using Javascript to Divide Table into Separate Tables each Containing a Single Row

Accessing Codeigniter Method URI without needing to rebuild the class structure

Tips for Removing Copyright on Charts

Tips for presenting JSON date in JavaScript using Google Chart

A problem arises when the ng-click function attempts to use $index as a parameter, resulting in

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

What is the best way to position cards in Angular Material?