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
}
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
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/
...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'
});
}]);
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';
}]);
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';
};
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 :