用角度突出顯示一個菜單元素

我是新來的角。我正在嘗試製作幾個類別的菜單。用角度突出顯示一個菜單元素

這些類別被定義爲<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>元素？

問題：什麼是「最有角度」的方式來突出顯示/取消突出顯示元素？

來源

2015-02-08 Arnaud Denoyelle

關鍵是在處理單擊時跟蹤選定的索引，然後有條件地將活動類應用於該元素（如果其索引值與捕獲的選定索引值相匹配）。

在此回答中更好的解釋here

來源

2015-02-08 14:10:16 mindparse

看起來不錯！我在讀這個。 – 2015-02-08 14:14:30

工程就像一個魅力，謝謝！ – 2015-02-08 14:17:20

我最近在我自己的應用程序中使用了相同的方法，它由一系列項目組成，當它們的排序順序發生變化時，正確選擇的項目保持如此狀態 – mindparse 2015-02-08 14:19:04

用角度突出顯示一個菜單元素

回答

相關問題