ng-class condional simple list?

Question

ok here's the list:

<ul>
<li ng-click="menuclick()" ng-class="testclass">test</li>
<li ng-click="menuclick()" ng-class="testclass">test</li>
<li ng-click="menuclick()" ng-class="testclass">test</li>
<li ng-click="menuclick()" ng-class="testclass">test</li>

and here is my controller:

.controller('editcontroller', function ($scope) {
$scope.activemenufirst = 'activemenu';
$scope.menuclick = function menuclick() {
    event.preventDefault();
    $scope.activemenufirst = ' ';
    alert('test');

};

});

how do i apply an active class on the li link when it's clicked and remove it from ALL other li's ? jsfiddle

Answer 1

Do you want to have your classes set by logic? If not you don't need to set the class in ng-class, you should just use the regular HTML class attribute.

If you don't want to add ids by hand (or through an ng-repeat) you can do it like this:

angular.module('myApp', [
])
    .controller('editcontroller', function ($scope) {
    $scope.menuItems = angular.element(document.querySelectorAll('.testclass'));
    $scope.menuclick = function menuclick(e) {
        angular.forEach($scope.menuItems, function(el){
            angular.element(el).removeClass('active');
        });
        angular.element(event.target).addClass('active');
    };

});

fiddle here

If you do end up creating the <li>s via a ng-repeat you'll be able to pass in a index property which you can use to set ids How to set repeated element id in AngularJS?.

Answer 2

You can just use a scope variable to keep track of what item is clicked. Then in your ng-class you can check if the current element is the one that is clicked:

HTML

<div ng-app="myApp">
    <div ng-controller="editController">
        <ul>
            <li ng-click="menuclick(1)" ng-class="{active: clickedId === 1}">test</li>
            <li ng-click="menuclick(2)" ng-class="{active: clickedId === 2}">test</li>
            <li ng-click="menuclick(3)" ng-class="{active: clickedId === 3}">test</li>
            <li ng-click="menuclick(4)" ng-class="{active: clickedId === 4}">test</li>
        </ul>
    </div>
</div>

Js

angular.module('myApp', [])
    .controller('editController', function ($scope) {
        $scope.menuclick = function menuclick(id) {
            $scope.clickedId = id;

        };

    });

jsFiddle: http://jsfiddle.net/6B2ga/

Answer 3

Well, here is my demo:

html:

<div ng-app="myApp">
    <div ng-controller="editcontroller">
        <ul>
            <li ng-click="menuclick(1)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 1]">test</li>
            <li ng-click="menuclick(2)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 2]">test</li>
            <li ng-click="menuclick(3)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 3]">test</li>
            <li ng-click="menuclick(4)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 4]">test</li>
        </ul>
    </div>
</div>

javascript:

angular.module('myApp', [])
    .controller('editcontroller', function ($scope) {
    $scope.activemenufirst = 'red';
    $scope.menuclick = function menuclick(index) {
        event.preventDefault();
        $scope.activemenufirst = ' ';
        $scope.active = index;
    };
});

If you make your li in ng-repeat,there is a '$index' in html markup. You can find it here.