How to change content of a div with template on button click?

Question

I used to work with jquery and it was easy to manipulate dom or even hide some content and show another inside a container. Need help in Angularjs to achieve something similar to show or hide a template inside a container on button click.

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
}

enter image description here

Would it work to create both in their own `
` and just add `hide/show` in the button action? — RST, Nov 23 '14 at 09:37
@RST: Yes that would work can you give an example. I am new in Angularjs. — , Nov 23 '14 at 09:46

7stud · Answer 1 · 2015-04-13T17:34:20.007

Need help in Angularjs to achieve something similar to show or hide a template inside a container on button click.

how to load chart view by default?

just add hide/show in the button action?
can you give an example. I am new in Angularjs

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

This 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">  <!-- For html5 (default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <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">

  <!--Chart or Table view-->
  <div ng-include="'chart.html'"  *****NOTE THE INTERIOR SINGLE QUOTES****
       ng-show="should_show_chart"  **ng-show explained below
       class="col-md-6" 
       id="container">
  </div>

  <div ng-include="'table.html'"  ****NOTE THE INTERIOR SINGLE QUOTES****
       ng-hide="should_show_chart" ***ng-hide explained below
       class="col-md-6" 
       id="container">
  </div>

</div>


<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>

</body>
</html>

chart.html:

<h3>Chart</h3>

table.html:

<h3>Table</h3>

If ng-show is a true value, then the tag is made visible; if ng-hide is a true value, then the tag is hidden.

Note that according to the Bootstrap docs:

icon classes...should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

And for accessibility reasons, you are supposed to add the attribute:

aria-hidden="true"

to the tag which specifies the glyphicon classes.

http://getbootstrap.com/components/

2) Using angular-ui-router

...which requires linking to an additional js script:

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

index.html:

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

<head>
   <title>AngularJS with UI-Router</title>

  <meta charset="UTF-8">  <!-- For html5 (the default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">

<div>

  <a class="btn btn-default" 
     ui-sref="chart"  ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the chart 'state'(see app.js). 
     ui-sref-active="active">  ***When the chart 'state' is activated, the specified class is added to the class attribute 
    <span class="glyphicon glyphicon-stats" 
          aria-hidden="true"></span>
  </a>

  <a class="btn btn-default"
     ui-sref="table"  ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the table 'state'(see app.js)
     ui-sref-active="active">  ***When the table 'state' is activated, then the specified  class is added to the class attribute 


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

</div>

<!--Chart or Table view-->
<div ui-view></div>   ***TEMPLATES ARE INSERTED HERE DEPENDING ON WHAT STATE IS ACTIVE****

<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Angular-UI-Router -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>

</body>
</html>

app.js:

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

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {

  //Set the default route, which will load the associated state:
  $urlRouterProvider.otherwise('/chart');

  //Define the states:
  $stateProvider
    .state('chart', {
      url: '/chart',
      templateUrl: 'chart.html'
    })

    .state('table', {
      url: '/table',
      templateUrl: 'table.html'
    });

}]);

3) Using ng-switch, ng-include (per xe4me's answer):

index.html:

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

  <head>
  <title>AngularJS</title>

  <meta charset="UTF-8">  <!-- For html5 (default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body class="container">

<div>
  <button type="button" 
          class="btn btn-default" 
          ng-click="should_display='chart'">

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

  <button type="button" 
          class="btn btn-default"
          ng-click="should_display='table'">

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


<div class="row">
  <!--Chart or Table view-->
  <div ng-switch="should_display">
    <!-- should_display is only assigned a value after a button is clicked-->
    <div ng-switch-default
         ng-include="'chart.html'" 
         class="col-md-6" 
         id="container">
    </div>

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

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

  </div>
</div>


<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>

</body>
</html>

app.js:

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

Instead of using a <div> with the ng-switch-default attribute to display a default view, you could use a controller to set the initial value of should_display. To do that, delete the <div> containing the ng-switch-default attribute, then add ng-controller="MyCtrl" to the <body> tag, and change app.js to this:

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

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

The answer would be much more useful if code samples were reduced to just the parts relevant to the question. Also, it's redundant to provide a specific `ng-switch-when` with the same content as `ng-switch-default`. — hon2a, Nov 24 '14 at 07:40
**it's redundant to provide a specific ng-switch-when with the same content as ng-switch-default** Thanks. — 7stud, Nov 24 '14 at 19:00

score 0 · Accepted Answer · answered Nov 23 '14 at 09:43

0

Your best bet would be using the ng-include directive and putting currently used template URL into a scope variable.

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

Changing displayed view is then done using a simple assignment

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

answered Nov 23 '14 at 09:43

hon2a

7,006
5
41
55

how to load chart view by default? – Nov 23 '14 at 16:03
How about calling `$scope.showChartView()` on app construction? :) – hon2a Nov 23 '14 at 16:27

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

I think the best way of doing this is using ng-switch there you can use ng-include and change the content with one click. you can check my answer here :

ng-switch

edited May 23 '17 at 10:27

Community

1
1

answered Nov 23 '14 at 21:08

Milad

27,506
11
76
85

How to change content of a div with template on button click?

3 Answers3

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

2) Using angular-ui-router

3) Using ng-switch, ng-include (per xe4me's answer):