適用於菜單項的CSS單擊

我這裏有一個小的測試應用程序... http://jsfiddle.net/poppypoop/LMCC2/適用於菜單項的CSS單擊

我不知道我將如何完成與角的js相同的功能。最終將「活動」類添加到所選菜單項，同時將名稱應用於下面的標題。在撥弄我用jQuery做到了，但現在我不知道如何做到這一點通過angularjs完成

var app = angular.module("app", []); 
function ctrl($scope, Data) 
{ 

}

難道是最好做一個指令或控制器？

來源

2014-04-12 prawn

要「比較」 jQuery和角度，我建議採取快速看一下[鏈接]（https://egghead.io/lessons/angularjs-application-wiring-jquery-vs-angularjs） – Hatsjoem

您不希望在角度範圍內設置類並修改HTML。相反，角模型應代表您的應用程序的數據，並使用數據綁定來更改與視圖相關的屬性，例如類等。

對於您的情況，範圍可以包含菜單項列表以及包含當前有效的項目。當點擊菜單項時，活動項目會改變。所有在視圖中的變化是由角數據綁定處理...

$scope.items = ['Home', 'Tickets', 'Direct Deposit', 'activity', 
       'Pay Rate Inquiry', 'Templates']; 
$scope.activeItem = 'Home'; 
$scope.setActive = function (activeItem) { 
    $scope.activeItem = activeItem; 
};

查看

<div class="menu-container"> 
    <ul id="menu-ul" class="nav"> 
     <li ng-repeat="item in items"> 
      <a ng-class="{ active: item === selectedItem }" href="#" 
      ng-click="setActive(item)">{{ item }}</a> 
     </li> 
    </ul> 
</div> 
<div class="nav-selection"> 
    <span>{{ activeItem }}</span> 
</div>

的jsfiddle：http://jsfiddle.net/xx7KF/

來源

2014-04-12 22:14:41

在角可以使用納克級用於添加類與布爾條件：

AngularJS - ng-class

可以將類綁定到一個布爾值VAR在你的範圍，當你點擊按鈕，用你需要的值更新它。

來源

2014-04-12 22:13:32

適用於菜單項的CSS單擊

回答

相關問題