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

Govern Your Gateway with Expressive Logs

How to Arrange AppBar Elements in Material UI with React

Issue encountered while importing dependency in Cypress Cucumber framework

Unable to get PrependTo to remove itself when clicked

Creating a custom jQuery selector

A guide to sending props to a CSS class in Vue 3

Building XML using PHP with relatively extensive information stored in JavaScript

Google Chrome's development tools are unable to detect the manifest

Bring to life in both directions

Utilize the double parsing of JSON information (or opt for an alternative technique for dividing the data

steps for including a JS file into Next.js pages

Retrieve the value of an object from a string and make a comparison

I am looking to dynamically alter the CSS background URL using JavaScript

combining HTML and CSS for perfect alignment

"I am trying to figure out how to set a link to an image using JavaScript. Can someone help me

Retrieve the total count of tables within a specific div element

Using Font Awesome Class Aliasing

Does Vuejs have a counterpart to LINQ?

Creating mock implementations using jest in vue applications

Demonstrating information using a HighCharts pie graph in a Visual Studio web application