C'est la première fois que je poste une question sur stackoverflow, désolé si ce n'est pas au bon format.

Je continue à rencontrer le même problème en angulaire et je suis sûr qu'il existe un moyen très simple de le résoudre, mais pour une raison quelconque, je ne peux pas le comprendre. Je posterai un exemple et donnerai une explication ci-dessous.

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

Bien que cela fonctionne, je n'aime pas avoir à me répéter pour toutes les balises <a> qui doivent avoir les mêmes classes et attributs. Je peux penser à plusieurs façons de le faire avec javascript, mais elles semblent toutes un peu «hack-y». Existe-t-il un moyen simple de le faire en angulaire ou en Javascript?

Merci d'avoir pris le temps de répondre, toute critique constructive est appréciée.

3
Jesse McIntosh 7 août 2016 à 08:35

3 réponses

Meilleure réponse

Vous pouvez d'abord créer un array de objects avec les chemins et le espace réservé (affichage):

Ensuite, vous pouvez utiliser la directive ngRepeat . :

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

Voyez travailler :

(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>

J'espère que ça aide.

2
developer033 7 août 2016 à 06:20

Dans votre html utilisez ng-repeat

Et comme votre premier li a la classe comme 'active', vous devez utiliser $ 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>

Et dans le contrôleur angulaire

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

    }]);
2
ismail baig 7 août 2016 à 06:20
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.
-2
Soumya Gangamwar 7 août 2016 à 07:36