如何添加类按钮点击在角度

how to add class on button click in angular?

本文关键字：按钮 何添加 添加      更新时间：2023-09-26

我做了一个简单的指令。我在那个指令上有两个按钮。我可以获得那个按钮的点击事件。但我想在上面添加类。

我有一个等级的

.red {
  background-color: red;
}

每当单击按钮时，我都想添加此类。。

  • 直接登录按钮有红色类。当单击注销按钮时，它应用于注销按键并从登陆中删除

或者，如果我再次点击登录按钮，它会应用于登录按钮并从注销按钮中删除。。

我确实喜欢

angular.module('app', ['ui.router']).directive('tm', function() {
  return {
    restrict: 'E',
    templateUrl: 'login.html',
    scope: {
      login: "&",
      logout: '&'
    },
    controller: 'f',
    controllerAs: 'vm'
  };
})

这是代码http://plnkr.co/edit/Q1e8u0okOa4looLcb2YO?p=preview

添加链接函数

试试这个

link: function(scope, elm, attr) {
  elm.find("button").on("click", function(e) {
    elm.find("button").removeClass("red");
    angular.element(this).addClass("red");
  })
}

PLNKR

或者您可以使用ngClass

像这个

JS

vm.isLogin = true;
vm.login = function() {
  vm.isLogin = true;
}
vm.logout = function() {
  vm.isLogin = false;
}

HTML

<button type="button" class="btn btn-default"  ng-class="{'red': vm.isLogin }"  ng-click='vm.login()'>Login</button>
<button type="button" class="btn btn-default" ng-class="{'red': !vm.isLogin }" ng-click='vm.logout()'>logount</button>

PLNKR

相关文章：