在angularjs中激活菜單項onclick

Question

我有側面菜單欄，在這里我使用ng-repeat來顯示列表中的項目。

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

我想在點擊時突出顯示該項目。我是初學者，有人可以指導我如何達到這種效果。在此先感謝您。

Answer 1

添加ngClass之類的，

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

您的HTML

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

和你的viewDates函數應該像

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

Answer 2

您可以使用ng-class根據條件動態添加樣式。

 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>