添加类，如果条件角JS匹配 [英] Adding a class if condition matches in Angular JS

问题描述

我刚开始采用了棱角分明的js。我使用它与codeIgniter。我尝试添加{类=活动}如果条件满足。

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.

我想一个活动类添加到＆LT;李方式＆gt; 如果冠军URL的最后一段相匹配

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

即。

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

我的code是如下：

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>

我觉得有问题的步骤是$ scope.current ='URI的>段（2）; ？>';

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

推荐答案

下面是如何纳克级的作品，说了下面的例子

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

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

类有效将被添加，如果范围变量菜单的 IsCurrentTab 值真正。其他类不活跃将被使用。

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

在你的情况首先我不知道你的这个code确实

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

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

如果这是将当前菜单名称在 $ scope.current 变量，那么所有你需要做的就是

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

希望这有助于。

编辑：

会要你检查，如果该值填充在$ scope.current变量。

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

这篇关于添加类，如果条件角JS匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！