如何更改Angular js中活动链接的背景颜色

【问题标题】：How to change background color of the active link in Angular js如何更改Angular js中活动链接的背景颜色
【发布时间】：2013-09-06 16:47:53
【问题描述】：

我的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;
}
}

它不工作......

【问题讨论】：

也显示select方法代码和isActive方法。
data-ng-click="sortCategory = 'demographics'" ng-class="{active: sortCategory == 'demographics'}" 可以工作。

标签： javascript css angularjs

【解决方案1】：

完全同意 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/

【讨论】：