[英]How to change background color of the active link in Angular js
我的HTML
<li data-ng-click="sortCategory('demographics')">Demographics</li>
<li data-ng-click="sortCategory('historical')">Historical</li>
<li data-ng-click="sortCategory('experimental')">Experimental</li>
我試過了
<li data-ng-click="sortCategory('socialmedia'); select(item)" data-ng-class="{active: isActive(item)}">Social Media</li>
$scope.isActive = function (item)
{
return $scope.isActive(item);
}
css(少)
li{
&.active {
background:#0088cc;
}
}
它不起作用......
完全同意Yoshi,您可以在調用sortCategory函數時將類別存儲在范圍變量中,並使用它來檢查類別是否處於活動狀態。 一段代碼可以是:
$scope.category = 'demographics'; //Your default category
$scope.sortCategory = function (category) {
$scope.category = category; //Update the category
....
}
$scope.isActive = function (category) {
//Check if category of a given <li> is equal to the current category
return $scope.category === category;
}
和一個看起來像的模板標記
<li data-ng-click="sortCategory('demographics')" ng-class="{'active' : isActive('demographics')}">Demographics</li>
<li data-ng-click="sortCategory('historical')" ng-class="{'active' : isActive('historical')}">Historical</li>
你可以在http://jsfiddle.net/sWKL5/2/找到一個實例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.