13

我正在学习 Angular.js，乍一看我认为这很容易。:P。但我被困在这里。我想要的是在我的 <.a>(anchor) 标签上添加另一个类。

我的 HTML 代码：

<a href="#/services" title="Services" class="scroll">
<a href="#/portfolio" title="Portfolio" class="scroll">

说当我单击服务链接时，它将添加“启用”类

<a href="#/services" title="Services" class="scroll enabled">
<a href="#/portfolio" title="Portfolio" class="scroll">

然后，如果我单击投资组合链接，它还将添加“启用”类，并将从服务锚标记中删除启用的类

<a href="#/services" title="Services" class="scroll">
<a href="#/portfolio" title="Portfolio" class="scroll enabled">

实现这一目标的最佳方法是什么？阅读有关 ng-click 和 ng-class 的信息，以及 ng-class 是否支持三元运算符？他们的文档对此没有任何说明。关联

4

3 回答 3

13

我也是从 Angular 开始的，在类似的情况下我使用指令，检查一下：

yourApp.directive('scroll', function () {        
    return {
    restrict : 'C',
        link: function(scope, element) {
            element.bind("click" , function(e){
                 $("a").removeClass("enabled"); // Here we need jQuery
                 element.addClass("enabled");
            });     
        }
    }
});


更新 万岁，我找到了一个没有 jQuery 的解决方案！element的click处理程序现在看起来像这样：

element.bind("click" , function(e){
   element.parent().find("a").removeClass("enabled"); // Vanilla jqLite!
   element.addClass("enabled");
});

Plunker：http ://plnkr.co/edit/jw16wW

于 2013-08-05T10:51:39.727 回答
7

只需在您的角度函数中添加此代码即可删除类

angular.element(document.querySelector(".yourClass")).removeClass("yourClass");

或者

angular.element(document.querySelector("#yourSelector")).removeClass("#yourSelector");

谢谢

于 2017-12-28T11:16:25.400 回答
1

试试这种方式

    <a href="#/services" title="Services" ng-class="{active: $route.current.activeTab == 'services'}>
    <a href="#/portfolio" title="Portfolio" ng-class="{active: $route.current.activeTab == 'portfolio'}>

and in the app.js
inject the route service like this
    angular.module('myModel',[]).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/services', {
                            templateUrl: 'my.tpl',
                            controller:,,myCtrl,
                            activeTab:  "services"
                        }). 
                       when('/portfolio', {
                            templateUrl: 'my2.tpl',
                            controller: myCtrl2,
                            activeTab:  "portfolio"
                        })
    });

“activeTab”是一个自定义变量，ng-class会依赖它来显示。

于 2013-08-05T10:50:42.573 回答