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

97

我正在尝试工作如何使用ngClick添加类。我已经上传了我的代码到plunker 这里点击。查看角度文档，我不知道应该怎么做。以下是我的代码片段。有人可以指引我正确的方向

 <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 
— NewKidOnTheBlock
source
从演示或爆炸中不清楚目标是什么。似乎正在尝试切换菜单，但是为什么只在演示中切换菜单链接？
— charlietfl 2013年
— Prashobh

Answers:

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
source
29
class是保留字，请className改为使用，YUI编译器将其缩小。
— 奥兰多
7
如果我想在同一视图中将此代码用于多个div，该怎么办？此代码实际上更改了所有div的类，我如何仅将类应用于所选的单击项
— xzegga 2014年
谢谢。要完全了解单击更改类按钮时发生的情况，请打开控制台并查看代码。
— fidev
1
也看一下这个SO线程。可能不会100％与问题范围相关联，但仍会提供其他有用的信息：stackoverflow.com/questions/31047094/…–
— BiLaL
144

我想在代码上动态添加或删除 “ active”类ng-click，这是我所做的。

<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
source
13
ng-init为-1。据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.
— 麦克Grabowski的
2
我只是避免使用控制器部分“这里”，因为这只是为了展示如何执行此操作的基本功能...
— cutedevil086 2014年
1
您也可以使用未记录的语法ng-class =“ {'active'：true} [selectedTab ==='users']”`
— Cody 2014年
我不明白为什么这行得通。我正在Angular 1.3.8中执行非常相似的操作，并且在单击另一个元素时不会从元素中删除条件类。我认为是因为其他元素未重新渲染。为什么然后这样做有效？单击单个元素时，旧版本的Angular是否会重新构建整个列表？
— 马特·莫纳
我只是添加此内容，因为它可能会帮助其他人。angular-ui-router具有您指定的功能以及更多其他功能。您创建由uri表示的状态。每个状态可能具有1个或多个控制器，1个或多个模板以及绑定到它们的1个或多个视图。链接是使用ui-sref指令生成的。当状态为活动时，ui-sref-active指令会将特定的类绑定到该元素。 Angular UI-Router文档
— deadbabykitten
12

只有指令可以简单而干净地做到这一点。

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

如果您要删除上一个类并添加一个新类，也可以在指令中执行此操作

    .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>
— 士兰
source
为什么在标记和指令中有图标的名称？
— 罗伯·约翰斯顿
这是一个愚蠢的评论。这是一件非常合法的事情，尽管我同意当您在Angular中解释如何做某事时可能不是这样做的地方
— bert
您为什么不这样做：angular.element（'glyphicon glyphicon-pencil）.removeClass（'glyphicon glyphicon-pencil'）？angular.element是jquery中$的angular的jqLit​​e版本。您可以只创建一个调用此函数的服务或指令，并在构造函数中传递removeClasses和addedClasses
— MattE
是的，但是我试图使用普通的角度js。
— Shilan'1
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));
};
— 扎克·阿盖尔
source
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）
source
2

我使用上面的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）
source
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）
source
-1

我不敢相信每个人都在做这件事。这实际上非常简单。只需将其粘贴到您的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>
— 约翰·帕洛特
source
-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;
  }
展开摘要

— 辛格
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.