TrinityTuts Tips

Key value pair in Angular Js

This is very simple and useful tip for those who want to use associative array in angular js. In this i an show you how to dynamically generate menu using angular js which have menu name and menu link.

Sample Code

<html>
	<head>
	<title>Angular JS</title>
	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js'></script>
	</head>
	
	<body ng-app="">
		<div>
			<ul ng-init="menusLinks=[{'#intro': 'Intro'},{'#one': 'What I Do'}, {'#two': 'Who I Am'}, {'#work': 'My Work'}, {'#contact': 'Contact'}]">
				<li ng-repeat="list in menusLinks">
					<a ng-repeat="(key, value) in list" href='{{key}}'> {{value}} </a>
				</li>
			</ul>
		</div>
	</body>
</html>

🙂