Rendre l'élément de menu actif onclick dans angularjs

Question

J'ai une barre de menu latérale, où j'ai utilisé ng-repeat pour afficher les éléments de la liste.

<div class="list-group" style="height:50px"> 
<span href="#" class="list-group-item active"> 
      Inbox 
     </span> 
     <div ng-repeat="record in inboxlist.Result"> 
      <a class='list-group-item' ng-click="viewDates($index);">{{record.customer_name}}</a> 
     </div> 
    </div> 

Je veux souligner le point sur click.I suis débutant quelqu'un pourrait me guider sur la façon de ce effect.thanks achive à l'avance.

Answer 1

Ajouter ngClass comme,

ng-class="{selected: $index === selectedIndex}" 

Votre HTML

<a class='list-group-item' ng-click="viewDates($index);" ng-class="{selected: $index === selectedIndex}">{{record.customer_name}}</a> 

et votre fonction viewDates devrait être comme

$scope.selectedIndex = null; 
$scope.viewDates = function ($index) { 
    $scope.selectedIndex = $index; 
    //.... your remaining code here 
}; 

Answer 2

vous pouvez utiliser ng-classe pour ajouter des styles dynamiquement en fonction de les conditions.

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.inboxlist = {}; 
 
$scope.inboxlist.Result = [{"customer_name":"ss"},{"customer_name":"aa"},{"customer_name":"cc"}] 
 

 
})

.change-color{ 
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div class="list-group" style="height:50px"> 
 
<span href="#" class="list-group-item active" > 
 
      Inbox 
 
     </span> 
 
     
 
     <div ng-repeat="record in inboxlist.Result" ng-init="record.check = false"> 
 
      <a class='list-group-item' 
 
      ng-click="record.check = true;viewDates($index);" 
 
      ng-class="{'change-color':record.check}">  {{record.customer_name}} </a> 
 
     </div> 
 
     
 
    </div> 
 
</div>