2013-09-06 7 views
0

Мой HTMLКак изменить цвет фона активной ссылки в угловых JS

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

Он не работает .. .

+0

показать 'select' код метода и' isActive' способ тоже. – Chandermani

+3

['data-ng-click =" sortCategory = 'demographics' "ng-class =" {active: sortCategory == 'demographics'} "'] (http://jsbin.com/AMOVOSo/1/) будет работать , – Yoshi

ответ

2

Полностью согласен с 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; 
} 

и шаблонов разметки, S похож

<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/

Смежные вопросы