用角度突出显示一个菜单元素

Question

我是新来的角。我正在尝试制作几个类别的菜单。

这些类别被定义为<li>...</li>标签。当用户选择一个类别时，我会突出显示它（并且取消选中之前选定的元素）。

到目前为止，我使用的ng-repeat/ng-click的组合：

<ul class="nav nav-sidebar"> 
    <li data-ng-repeat="category in categories" class="menu-element ng-scope" data-category="{{category.category}}" data-ng-click="onClick($event)"> 
     <a href="#" class="glyphicon glyphicon-{{category.icon}}"> {{category.text}}</a> 
    </li> 
</ul> 

而且，所述控制器：

var myApp = angular.module('myApp', []); 
myApp.controller('categoryListCtrl', function ($scope) { 

    $scope.onClick = function(event) { 
    //What must I do here? 
    console.log(event); 
    }; 

    $scope.categories = [ 
    {'category': 'home',  icon :'home',  text: 'Home'}, 
    {'category': 'news',  icon :'comment', text: 'News'}, 
    {'category': 'brands',  icon :'tower', text: 'Brands'}, 
    [...] 
    ] 
} 

当<li>元件上的用户点击，则执行功能$scope.onClick。

在这里，我想为选定的<li>添加一个“高亮”类，并从先前选择的<li>中删除“高亮”类。

看着console.log(event)，我看到event.toElement是被点击的<a>。

仍看着console.log(event)，我看到我可以通过event.toElement.offsetParent获得<li>元素，但这是DOM操作，我被告知它在控制器中是邪恶的。

问题：我把the ng-click指令的<li>元素，为什么会在event.toElement的<a>元素？

问题：什么是“最有角度”的方式来突出显示/取消突出显示元素？

Answer 1

关键是在处理单击时跟踪选定的索引，然后有条件地将活动类应用于该元素（如果其索引值与捕获的选定索引值相匹配）。

在此回答中更好的解释here