Question

我刚刚开始使用角度js。我正在使用CodeIgniter。我想在条件匹配的情况下添加{class =＆＃34; active＆＃34;}。

我正在尝试将活动类添加到<li>，如果其标题与网址的最后一段匹配。

即。

 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 =＆＃39; uri-＆gt; segment（2）; ？＆GT;＆＃39 ;;

Answer 1

以下是ng-class的工作方式，例如下面的例子

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

如果范围变量active具有menu值IsCurrentTab，则会添加

类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变量中是否填充了值。

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

1 个答案: