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。

在这里，我想添加一个＆＃34;突出显示＆＃34;选择<li>的类并删除＆＃34;突出显示＆＃34;来自之前选择的<li>。

的课程

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

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

问题：我在the ng-click元素上添加了<li>指令，为什么我会在<a>中获得event.toElement元素？

问题：什么是＆＃34;最有棱角的＆＃34;突出显示/取消突出显示元素的方法？

Answer 1

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

在这个答案here

中有更好的解释

突出显示带角度的菜单元素

1 个答案: