3

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.

3 Answers3

2

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.

developer033
  • 24,267
  • 8
  • 82
  • 108
2

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
        ];

    }]);
ismail baig
  • 861
  • 2
  • 11
  • 39
-2
yes ,you can use ng-repeat.I think it satisfy your problem. and If then href's are states then angular provide ui-sref. This way you can implement.
Can you check this attachement .
     "http://jsfiddle.net/soumyagangamwar/789Ks/77/"

 If it satisfy you requirement  then don't forget to vote.
Soumya Gangamwar
  • 954
  • 4
  • 16
  • 44