使用angularjs更改按钮样式

Change button style with angularjs

本文关键字：按钮 样式 angularjs 使用      更新时间：2023-09-26

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

是可能调用另一个CSS类从js(在函数)?谢谢。

初学者试试

<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

你可以通过ng-click动态添加一个类。

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

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

在你的控制器的某处:

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

在你的模板中:

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