使菜单项激活oncl​​ick in angularjs

Question

我有侧面菜单栏，我使用ng-repeat显示列表中的项目。

log2(10000) = 13.287712

我想在点击时突出显示该项目。我是初学者，有人可以指导我如何实现这种效果。提前谢谢。

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>