I have made a page with 3 links. I want that as I click one of the links, the associated behaviour should showup.
Following is my code :
index.html
<html>
<head>
<title> SiteMan</title>
<link rel= "stylesheet" href="stylesheet.css">
<!--<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">-->
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">-->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "tree.js"></script>
</head>
<body ng-app="myApp">
<div>
<div id = "header">
<h1>Siteman RANN 0.1</h1>
</div>
<div id ="nav">
<button> Add Attribute </button>
<button> Add User </button>
<button> Add Doccument </button>
</div>
<div id = "aside" style="padding:5px">
<a href="" ng-click="attr=1">All Attributes</a></br>
<a href="" ng-click="user=1">All Users</a></br>
<a href="" ng-click="docs=1">All Document Types</a></br>
</div>
<div id = "section">
<table ng-controller="mainCtrl" ng-show="attr">
<tr ng-repeat="x in attributes">
<td>{{x.name}}</td>
</tr>
</table>
<table ng-controller="mainCtrl" ng-show="user">
<tr ng-repeat="x in names">
<td>{{ x.displayName }}</td>
</tr>
</table>
<table ng-controller="mainCtrl" ng-show="docs">
<tr ng-repeat="x in extnsion">
<td>{{ x.extension }}</td>
</tr>
</table>
</div>
<div id = "article">
</div>
<div id = "footer">
Copyright © Siteman RANN
</div>
</div>
</body>
</html>
I want that if I click on "All Attributes" link, attr=1 and user and docs should be assigned value 0 . This should happen for all three links : All Attributes, All Users, All Document types .
