使用ng-click在AngularJS中添加和删除类

Question

使用ng-click在AngularJS中添加和删除类

javascriptangularjsangularjs-ng-clickng-class

98

我正在尝试使用ngClick添加类。我已经将我的代码上传到plunker 这里。查看angular文档，我无法找出应该如何完成的确切方法。以下是我的代码片段。请有人指导我正确的方向。

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

控制器

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

- NewKidOnTheBlock

从演示或解释中不清楚目标是什么。似乎试图切换菜单，但为什么演示中只切换菜单链接？ - charlietfl

10个回答

110

您只需将一个变量绑定到指令“ng-class”中，然后从控制器中更改它即可。以下是如何执行此操作的示例：

var app = angular.module("ap",[]);

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});

.red{
  color:red;
}

.blue{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>

这里是在 jsFiddle 上运行的示例。

- geonunez

29

class 是一个保留字，请使用 className 替代，否则 YUI 编译器将无法对其进行压缩。 - Orlando

8

如果我想在同一个视图中使用这段代码来处理多个 div，该怎么办？当前的代码会把所有 div 的类都改变，我该如何仅将类应用于所选的被点击的项？ - xzegga

谢谢。为了完全理解当单击“更改类”按钮时发生了什么，请打开控制台并查看代码。 - fidev

1

也可以看一下这个 Stack Overflow 的帖子。可能与问题范围不完全相关，但仍提供了额外有用的信息：https://stackoverflow.com/questions/31047094/how-to-add-class-name-with-the-existing-class-name - BiLaL

12

用指令的方式，有一种简单而干净的方法来完成这个任务。

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>

- artecher

9

如果您想删除先前的类并添加新类，也可以在指令中执行此操作。

    .directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                }
            });
        }
    };
});

在你的模板中：

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>

- Shilan

为什么在标签和指令中需要图标名称？ - Robert Johnstone

那是一条愚蠢的评论。虽然我同意在解释如何在Angular中执行某些操作时，这可能不是合适的地方，但这是完全合法的事情。 - bert

为什么不这样做：angular.element('glyphicon glyphicon-pencil).removeClass('glyphicon glyphicon-pencil')？ angular.element 实际上是 Angular 中的 jqLite 版本，类似于 jQuery 中的 $。您可以创建一个调用此函数并在构造函数中传递 removedClasses 和 addedClasses 的服务或指令。 - MattE

没错，但我想尝试使用纯AngularJS。 - Shilan

7

你说得很对，你只需要在ng-click中设置selectedIndex即可。

ng-click="selectedIndex = 1"

这是我实现的一组按钮，可以更改ng-view，并突出显示当前选择视图的按钮。

<div id="sidebar" ng-init="partial = 'main'">
    <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div>
  </div>

并且这是我的控制器中的代码。

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};

- Zack Argyle

4

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>

- Jay Prakash Singh

3

我使用了Zack Argyle上面的建议来获取这个，我觉得非常优雅：

CSS：

.active {
    background-position: 0 -46px !important;
}

HTML:

<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}">
    <img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}">
    <img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}">
    <img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}">
    <img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}">
    <img src="images/VeryUnhappy.png" style="height:24px;" />
</button>

- Adriaan Davel

2

如果您希望将添加和删除类的逻辑分离，使其在控制器上进行，则可以这样做。

控制器

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

HTML

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

CSS （层叠样式表）

.highlighted {
   background-color: green;
   color: white;
}

- Dennis Wanyonyi

0

我简直不敢相信大家把这个问题搞得这么复杂。实际上，这非常简单。只需将以下代码粘贴到您的HTML中（无需指令/控制器更改-"bg-info"是Bootstrap类）：

<div class="form-group col-md-12">
    <div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false">CARS</div>
    <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div>
    <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div>
</div>

- john pallot

-1

对于响应式表单 -

HTML 文件

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>

TS 文件

changeMe() {
  switch (this.btn_label) {
    case 'Yes ': this.btn_label = 'Custom' ;
    this.btn_class = 'btn btn-danger btn-lg btn-block';
    break;
    case 'Custom': this.btn_label = ' No ' ;
    this.btn_class = 'btn btn-success btn-lg btn-block';
    break;
    case ' No ': this.btn_label = 'Yes ';
      this.btn_class = 'btn btn-primary btn-lg btn-block';
      break;
  }

- M Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cutedevil086 · Accepted Answer

144

我想在ng-click上动态地添加或移除代码中的"active"类，以下是我所做的。

<ul ng-init="selectedTab = 'users'">
   <li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li>
   <li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li>
</ul>

- cutedevil086

13

根据 AngularJS 文档，ngInit 的唯一适当用法是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除此之外，您应该使用控制器而不是 ngInit 在作用域上初始化值。 - Mike Grabowski

2

我只是避免了控制器部分“在这里”，因为这只是展示如何实现基本功能的方式... - cutedevil086

1

你也可以使用未记录的语法 ng-class="{'active': true}[selectedTab === 'users']"。 - Cody

我只是添加这个因为它可能会帮助到其他人。angular-ui-router具有您指定的功能以及更多功能。您可以创建由uri表示的状态。每个状态可以有一个或多个控制器，一个或多个模板和一个或多个视图绑定到它们上面。使用ui-sref指令生成链接。当状态处于活动状态时，ui-sref-active指令将绑定特定类到该元素。 Angular UI-Router文档 - deadbabykitten

我会在控制器中声明selectedTab。 - Kishor Pawar

显示剩余4条评论