使用 ng-click 在 angularJs 中添加和删除类答案

【问题标题】：adding and removing classes in angularJs using ng-click使用 ng-click 在 angularJs 中添加和删除类
【发布时间】：2013-12-25 22:58:10
【问题描述】：

我正在尝试如何使用 ngClick 添加类。我已将我的代码上传到 plunker Click here。查看角度文档，我无法弄清楚它应该完成的确切方式。下面是我的代码的 sn-p。有人可以指导我正确的方向

 <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;
    });

【问题讨论】：

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

标签： javascript angularjs angularjs-ng-click ng-class

【解决方案1】：

我想在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>

【讨论】：

-1 用于 ng-init。根据 AngularJS 文档 - The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
我只是避开了“这里”的控制器部分，因为这只是为了展示如何做到这一点的基本功能......
您也可以使用未记录的语法`ng-class="{'active': true}[selectedTab === 'users']"`
我不明白为什么会这样。我在 Angular 1.3.8 中做了一些非常相似的事情，当单击另一个元素时，条件类不会从元素中删除。我会假设因为其他元素没有重新渲染。那么，为什么这曾经奏效过？当单击单个元素时，旧版本的 Angular 是否重新构建了整个列表？
我只是添加这个，因为它可能会帮助其他人。 angular-ui-router 具有您指定的功能等等。您创建由 uri 表示的状态。每个状态可能有 1 个或多个控制器、1 个或多个模板以及绑定到它们的 1 个或多个视图。链接是使用 ui-sref 指令生成的。 ui-sref-active 指令将在状态处于活动状态时将特定类绑定到该元素。 Angular UI-Router Documentation

【解决方案2】：

您只需要将变量绑定到指令“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的示例

【讨论】：

class 是保留字，请改用className，YUI 编译器将无法缩小它。
如果我想将此代码用于同一视图中的多个 div 怎么办？此代码实际更改所有 div 的类，我如何将类仅应用于选定的单击项目
谢谢。要完全了解单击更改类按钮时发生的情况，请打开控制台并查看代码。
也看看这个 SO 线程。可能不是 100% 与问题范围相关联，但仍提供额外有用的信息：stackoverflow.com/questions/31047094/…

【解决方案3】：

有一种简单而干净的方法，只需使用指令即可。

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

【讨论】：

【解决方案4】：

如果你想删除以前的类并添加一个新类，你也可以在指令中这样做

    .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>

【讨论】：

为什么标签和指令中有图标的名称？
这是一个愚蠢的评论。这是一件完全合法的事情，尽管我同意当你解释如何在 Angular 中做某事时它可能不是适合它的地方
你为什么不这样做：angular.element('glyphicon glyphicon-pencil).removeClass('glyphicon glyphicon-pencil')？ angular.element 几乎是 angular 的 jquery 中 $ 的 jqLite 版本。您可以创建一个调用此函数的服务或指令，并在构造函数中传入 removedClasses 和 addedClasses
没错，但我尝试使用普通的 Angular js。

【解决方案5】：

你完全正确，你所要做的就是在你的 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));
};

【讨论】：

【解决方案6】：

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

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

        $scope.isVisible = false;
    });

&lt;div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

我使用上面 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>

【讨论】：

【解决方案8】：

如果您更喜欢关注点分离，例如添加和删除类的逻辑发生在控制器上，您可以这样做

控制器

 (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;
}

【讨论】：

【解决方案9】：

我不敢相信每个人都把这件事弄得这么复杂。这实际上非常简单。只需将其粘贴到您的 html 中（无需更改指令。/控制器 - “bg-info”是一个引导类）：

<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>

【讨论】：

【解决方案10】：

对于响应式表单 -

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;
  }

【讨论】：