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

Question

我刚刚开始使用 Angular 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 }"

如果作用域变量menu 具有IsCurrentTab 值true，则将添加类active。其他类 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 变量中。