Menu
This is my first time posting a question on stackoverflow so sorry if its not in the correct format.
I keep running into the same problem in angular and i'm sure there is a very simple way to solve it but for some reason i can't figure it out. I will post an example and give an explanation below.
<div class="jmc-navbar-content" ng-if="!vm.isHidden" ng-swipe-up="vm.toggleNav()">
<!-- contains the navigation/page links -->
<ul class="jmc-navbar-menu">
<li class="active"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#home">Home</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#portfolio">Portfolio</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#about">About</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#contact">Contact</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#/">View source on GitHub</a></li>
</ul>
</div>
Although this works i don't like having to repeat myself for all the <a> tags which need to have the same classes and attributes. I can think of multiple ways in which to do this with javascript but they all seem a little 'hack-y'. Is there any simple way to do this in Angular or Javascript?
Thanks for taking the time to reply, any and all constructive criticism is appreciated.
629
First you could create an array of objects with the paths and the placeholder(display):
Then you can use ngRepeat directive:
<li ng-class="{ 'active': $first }" ng-repeat="link in vm.links"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="{{link.path}}">{{link.display}}</a></li>
See it working:
(function() {
'use strict';
angular
.module("app", [])
.controller('MainCtrl', MainCtrl);
function MainCtrl() {
var vm = this;
vm.links = [
{
"path": "#home", "display": "Home"
},
{
"path": "#portfolio", "display": "Portfolio"
},
{
"path": "#contact", "display": "Contact"
},
{
"path": "#about", "display": "About"
},
{
"path": "#/", "display": "View source on GitHub"
}
];
}
})();<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<li ng-class="{ 'active': $first }" ng-repeat="link in vm.links"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="{{link.path}}">{{link.display}}</a></li>
</body>
</html>I hope it helps.
96
In your html use ng-repeat
And as your first li has the class as 'active', you need to use $index
<div ng-repeat = 'aVal in aVals'>
<li ng:class="{true:'active', false:''}[$index == 0]"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="aVal.hrefVal">{{aVal.name}}</a></li>
</div>
And in angularController
var app = angular.module("myApp", []);
angular
.module('myApp')
.controller('myCtrl', ['$scope',
function ($scope) {
$scope.aVals= [
{ hrefVal: '#home', name='Home'},
{ hrefVal: '#portfolio', name='Protfolio'},
// so on
];
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
