<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label>
Your name:
<input ng-model="name">
</label>
<viewstack selected-index="viewIndex">
<h1>Hello, {{name}}!</h1>
<h1>Glad to have you still here, {{name}}!</h1>
<h1>Goodbye, {{name}}!</h1>
</viewstack>
<div class="btn-group">
<button class="btn" ng-click="viewIndex=0">View 1</button>
<button class="btn" ng-click="viewIndex=1">View 2</button>
<button class="btn" ng-click="viewIndex=2">View 3</button>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.viewIndex = 0;
});
app.directive('viewstack', function($compile) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var children = element.children();
scope.$watch(attrs.selectedIndex, function(idx) {
var selectedIndex = parseInt(idx, 10);
angular.forEach(children, function(el, childIdx) {
var isSelected = childIdx === selectedIndex;
angular.element(el).css('display', isSelected ? '' : 'none');
});
});
}
};
});
/* Put your css in here */