Adding a class if condition matches in Angular JS

Question

I have just started using angular js. I am using it with CodeIgniter. I am trying to add a {class="active"} if a condition matches.

I am trying to add a active class to a <li> if its title matches with the last segment of url.

i.e.

 if(title of this nav_menu matches with the last uri segment)
    add "active" class
 else
    do nothing

My code is as follows :

header.php

<ul class="nav navbar-nav" ng-app="" ng-controller="menuController">
    <li ng-repeat="x in menus" ng-class="{'active': x.name = scope}">
        <a ng-href="http://{{ x.link}}">{{ x.name }}</a>
    </li>
</ul>

footer.php

<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>


<script>
    function menuController($scope) {

        $scope.menus = [ {
            name : "Home",
            link : "projects/test/home"
        }, {
            name : "Daily Special",
            link : "projects/caesar/daily-especial"
        }, {
            name : "Menu",
            link : "projects/test/menu"
        }, {
            name : "Special",
            link : "projects/test/special"
        }, {
            name : "Gallery",
            link : "projects/test/gallery"
        }, {
            name : "About us",
            link : "projects/test/about-us"
        }, {
            name : "Contact",
            link : "projects/test/contact"
        } ];

        $scope.current = '<?php echo $this->uri->segment(2); ?>';

    }
</script>

I think the problematic step is $scope.current = 'uri->segment(2); ?>';

Do you mean something like: ng-class="{'active': x.name.toLowerCase().replace(/ /g, '-') == x.link.substr(link.lastIndexOf('/') + 1, link.length)}"? — Re Captcha
– Re Captcha, Commented Nov 12, 2014 at 6:19

Yasser Shaikh · Accepted Answer · 2014-11-12 05:39:32Z

5

Here is how ng-class works, say for the below example

ng-class="{ 'active': menu.IsCurrentTab, 'inactive': !menu.IsCurrentTab }"

class active will be added if the scope variable menu has IsCurrentTab value true. Else class inactive will be used.

In your case firstly I do not know what this code of your's does

$scope.current = '<?php echo $this->uri->segment(2); ?>';

If this is putting the current menu name in the $scope.current variable, then all you need to do is

<li ng-repeat="x in menus" ng-class="{'active': x.name == current}" >

Hope this helps.

Edit:

Would want you to check if the value is filled in your $scope.current variable.

edited Nov 12, 2014 at 5:39

answered Nov 12, 2014 at 5:32

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

radiopassive Over a year ago

Thanks Yasser. Could you simplify that a bit?

radiopassive Over a year ago

Silly of me, I used x.name = scope, when it had to be x.name == scope :D.

Collectives™ on Stack Overflow

Adding a class if condition matches in Angular JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related