使用 angularjs 更改按钮样式答案

【问题标题】：Change button style with angularjs使用 angularjs 更改按钮样式
【发布时间】：2015-09-23 08:05:17
【问题描述】：

我有 3 个按钮，我想在单击按钮时更改其样式。我不知道 Angular 是否有自己的功能，例如 ng-class、ng-click 或类似功能，但我无法使其正常工作。

<button class="btn1" ng-click="function1"></button>
<button class="btn2" ng-click="function2"></button>
<button class="btn3" ng-click="function3"></button>

是否可以从 js（在函数中）调用另一个 css 类？谢谢。

【问题讨论】：

标签： javascript css angularjs button

【解决方案1】：

初学者试试这个

<button 
    class="btn_theme btn1" 
    ng-class="{'clicked':clicker}" 
    type="submit" ng-click="select1()">Hello</button>

在控制器中使用这个

  $scope.select1 = function() {
    $scope.clicker = !$scope.clicker
  }

见http://plnkr.co/edit/zKsYoD3coPlZRHQkRQO1?p=preview

【讨论】：

如果你设置了 plnkr，我可以帮助连接一切

【解决方案2】：

您可以在 ng-click 上动态添加一个类。

<li ng-class="{'xyzclass':addClass}" ng-click="addClass = TRUE"><a href="#users" >Users</a></li>

【讨论】：

怎么样？我需要使用一个函数，可以在同一个调用中使用函数+添加 css 吗？

【解决方案3】：

在您的函数定义中，您可以在作用域上设置一些变量，然后您可以在ng-class 指令中使用这些变量。

示例

控制器中的某处：

$scope.function1 = function () {
  $scope.clickedButton1 = true;
}

在您的模板中：

<button 
  class="btn1" 
  ng-class="{'button1Clicked': clickedButton1}" 
  ng-click="function1()">Button1</button>

【讨论】：