如果条件在Angular JS中匹配,则添加一个类

Question

我刚刚开始使用角度js.我正在使用CodeIgniter.如果条件匹配,我正在尝试添加{class ="active"}.

我正在尝试添加一个活动类,<li>如果它的标题与url的最后一段匹配.

即

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

我的代码如下:

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-> segment(2); ？>';

Answer 1

以下是ng-class的工作原理,比如下面的例子

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

active如果范围变量menu具有IsCurrentTab值,则将添加class true.其他课程inactive将被使用.

在你的情况下,我首先不知道你的代码是什么

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

如果这是将当前菜单名称放在$scope.current变量中,那么您需要做的就是

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

希望这可以帮助.

编辑:

是否希望您检查$ scope.current变量中是否填充了值.