在 angularjs 中使菜单项处于活动状态

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>

我想在 click.I 上突出显示项目，我是初学者，有人可以指导我如何提前实现这个 effect.thanks。

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>

在 angularjs 中使菜单项处于活动状态

Making menu item active onclick in angularjs

javascript

jquery

menuitem

angularjs