Updating the content of a div with a template by clicking a button: a guide

Question

Updating the content of a div with a template by clicking a button: a guide

Back in the day, I was comfortable working with jQuery to manipulate the DOM and hide/show content within a container. Now, I need assistance with AngularJS to achieve a similar functionality of displaying or hiding a template inside a container upon button click.

This is my main reports page

<div style="margin-left:25px;margin-bottom:10px">
    <button class="btn glyphicon glyphicon-stats" ng-click="showChartView()"></button>
    <button class="btn glyphicon glyphicon-th-list" ng-click="showTableView()"></button>
</div>
<div class="row" style="width:100%; margin:0px">
    <!--Chart or Table view-->
    <div class="col-md-10" style="width:70%;margin-right:0px" id="container">

    </div>
    <!--Filter-->
    <div class="col-md-2" style="width:30%;margin-left:0px">
        <div ng-include='"templates/reports/filters.html"'></div>
    </div>
</div>

$scope.showChartView = function() {
    //should display charttemplate.html inside container
}

$scope.showTableView = function() {
    //should display tabletemplate.html inside container
}

css angularjs

Answer 1

Answer №1

Seeking assistance in Angularjs to achieve functionality similar to toggling the display of a template within a container upon button click.

How can I load the chart view by default?

Is it as simple as adding hide/show in the button action?
Can you provide an example? I am new to Angularjs.

1) Utilizing ng-include, ng-click, ng-show, ng-hide

This method works for me:

app.js:

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

app.controller('MyCtrl', ['$scope', function ($scope) {
  $scope.should_show_chart = true;
}]);

index.html:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
  <title>AngularJS</title>

  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 

  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body ng-controller="MyCtrl" class="container">

<div>
  <button type="button" 
          class="btn btn-default" 
          ng-click="should_show_chart=true">

    <span class="glyphicon glyphicon-stats" 
          aria-hidden="true"></span>
  </button>

  <button type="button" 
          class="btn btn-default"
          ng-click="should_show_chart=false">

    <span class="glyphicon glyphicon-th-list" 
          aria-hidden="true"><span>
  </button>
</div>


<div class="row">

  <div ng-include="'chart.html'"  
       ng-show="should_show_chart"   
       class="col-md-6" 
       id="container">
  </div>

  <div ng-include="'table.html'"  
       ng-hide="should_show_chart"    
       class="col-md-6" 
       id="container">
  </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>

</body>
</html>

chart.html:

<h3>Chart</h3>

table.html:

<h3>Table</h3>

If ng-show evaluates to true, the tag is shown; if ng-hide is true, the tag is hidden.

It's important to follow Bootstrap guidelines and add accessibility attributes like aria-hidden="true" for icon classes.

http://getbootstrap.com/components/

2) Using angular-ui-router

Include the additional js script:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

...and so on.

Answer 2

Seeking assistance in Angularjs to achieve functionality similar to toggling the display of a template within a container upon button click.

How can I load the chart view by default?

Is it as simple as adding hide/show in the button action?
Can you provide an example? I am new to Angularjs.

1) Utilizing ng-include, ng-click, ng-show, ng-hide

This method works for me:

app.js:

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

app.controller('MyCtrl', ['$scope', function ($scope) {
  $scope.should_show_chart = true;
}]);

index.html:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
  <title>AngularJS</title>

  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 

  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body ng-controller="MyCtrl" class="container">

<div>
  <button type="button" 
          class="btn btn-default" 
          ng-click="should_show_chart=true">

    <span class="glyphicon glyphicon-stats" 
          aria-hidden="true"></span>
  </button>

  <button type="button" 
          class="btn btn-default"
          ng-click="should_show_chart=false">

    <span class="glyphicon glyphicon-th-list" 
          aria-hidden="true"><span>
  </button>
</div>


<div class="row">

  <div ng-include="'chart.html'"  
       ng-show="should_show_chart"   
       class="col-md-6" 
       id="container">
  </div>

  <div ng-include="'table.html'"  
       ng-hide="should_show_chart"    
       class="col-md-6" 
       id="container">
  </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>

</body>
</html>

chart.html:

<h3>Chart</h3>

table.html:

<h3>Table</h3>

If ng-show evaluates to true, the tag is shown; if ng-hide is true, the tag is hidden.

It's important to follow Bootstrap guidelines and add accessibility attributes like aria-hidden="true" for icon classes.

http://getbootstrap.com/components/

2) Using angular-ui-router

Include the additional js script:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

...and so on.

Answer 3

Answer №2

Your top choice would be to utilize the ng-include directive and placing the currently used template URL into a scope variable.

<div ng-include="view"></div>

To change the displayed view, simply make a simple assignment:

$scope.showNewView = function () {
    $scope.view = '/path/to/newView.fragment.html';
};

Answer 4

Your top choice would be to utilize the ng-include directive and placing the currently used template URL into a scope variable.

<div ng-include="view"></div>

To change the displayed view, simply make a simple assignment:

$scope.showNewView = function () {
    $scope.view = '/path/to/newView.fragment.html';
};

Answer 5

Answer №3

In my opinion, the most effective approach to accomplish this task is through utilizing ng-switch. This allows you to incorporate ng-include and easily switch the content by simply clicking a button. Explore more about it in my response linked here:

ng-switch

Answer 6

In my opinion, the most effective approach to accomplish this task is through utilizing ng-switch. This allows you to incorporate ng-include and easily switch the content by simply clicking a button. Explore more about it in my response linked here:

ng-switch

Updating the content of a div with a template by clicking a button: a guide

Answer №1

1) Utilizing ng-include, ng-click, ng-show, ng-hide

2) Using angular-ui-router

Answer №2

Answer №3

Similar questions

Arranging div elements into columns side by side with Flexbox

What is the best way to incorporate one angular template into another while ensuring that bootstrap classes remain functional?

Toggle a jQuery bar based on the presence of a specific CSS class

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Tips for avoiding a noticeable sliding drawer when changing the direction of an HTML element

The background color in CSS frames the text with a unique hue

Image remains fluid within a static div without resizing

Shop of Chocolate in Magento

No members were exported by the module, please export an interface

Creating an interactive timer that counts down in real-time using a combination of Django and JavaScript

What is the best way to change the folder name when hovering over it?

CSS is not referred to as animation

Utilizing jQuery to implement a CSS style with a fading effect, such as FadeIn()

Optimizing CSS for Landscape Letter Print Alignment

Is there a way to eliminate the default bootstrap stylings?

What is the process for invoking a function in ng-repeat after an object has been altered?

Despite being positioned absolutely, they are able to make z-index work effectively

What are the best methods for creating a responsive website?

When I attempt to post to my restify API, I am receiving an error message stating that the "name_of_the_field" path is required