使用angularjs更改按钮样式

Question

我有3个按钮，我想在点击按钮时更改其样式。我不知道角度是否有自己的功能，如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类？感谢。

Answer 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

Answer 2

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

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

Answer 3

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

示例

控制器中的某处：

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

在你的模板中：

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