使用角度突出显示菜单元素

Question

我是 Angular 的新手。我正在尝试制作一个包含多个类别的菜单。

类别定义为<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> 添加一个“highlight”类，并从之前选中的<li> 中删除“highlight”类。

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

仍在查看 console.log(event) ，我发现我可以使用 event.toElement.offsetParent 获取 <li> 元素，但这是 DOM 操作，我被告知它在控制器中是邪恶的。

问题：我将the ng-click 指令放在<li> 元素上，为什么我在event.toElement 中得到<a> 元素？

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

Answer 1

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

更好地解释这个答案here