ng-class 条件和 $location 路径 Angular答案

【问题标题】：ng-class condtionally and $location path Angularng-class 条件和 $location 路径 Angular
【发布时间】：2015-01-22 08:41:32
【问题描述】：

这是我的网站，例如：example.com
条件是：

当用户在这些位置时，我想添加类：
第一个条件：example.com/# 用户点击没有链接的东西，例如 href="#"
和
二：example.com/Cartable

这是我的小代码：

$scope.isActive = function (route) {
        return route === $location.path();

    }

HTML

ng-class="{cartable:isActive('/Cartable')}"

它的工作，但我怎样才能添加两个网址，像这样：

ng-class="{cartable:isActive('/Cartable', '/#')}"

谢谢

【问题讨论】：

在这种情况下，ui-sref 中有一个有趣的指令github.com/angular-ui/ui-router/wiki/…
$scope.isActive = function (route1, route1) { ..
感谢@Rodion，是的，我正在使用 ui 路由器

标签： javascript angularjs

【解决方案1】：

您有两种选择，通过添加“或”条件多次调用 isActive 函数，如下所示：

ng-class="{cartable: isActive('/Cartable') || isActive('/#')}"

或者改变 isActive 函数来接受一个数组：

$scope.isActive = function (routes) {
    angular.forEach(routes, function(route){
        if(route === $location.path())
            return true; 
    });
}

【讨论】：

谢谢，但我为什么要使用 angular.forEach ？我没有得到这部分！我用#/catable 写的函数很好，但用/# 写得不好
如果您想使用我的第二种方法，这意味着 routes 参数将是一个数组。因此，为了检查它是否与您的路径匹配，您必须遍历 routes 并验证它。这就是angular.forEach 发挥作用的地方。如果你不想，你可以选择使用第一种方法。
再次嗨，我使用了你的第一种方法，但是当我点击带有 '#' ng-class 的东西不起作用时
请考虑打开一个新问题并连同您的代码一起描述您的问题。因此，提供帮助会更容易。
我又问了一遍：stackoverflow.com/questions/28140151/…

【解决方案2】：

在控制器中，使用参数

$scope.isActive = function () {

        for (var index = 0; index < arguments.length; index++) {
            if (arguments[index] === $location.path()) {
                return true;
            }
        }
        return false;
    }

【讨论】：

非常感谢，您能告诉我为什么要使用 for 吗？我用#/catable 写的函数很好，但用/# 写得不好

【解决方案3】：

如果您使用的是 ui-router，只需执行以下操作：

li(ui-sref-active="cartable") a(ui-sref="routeName")

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active

【讨论】：