点击Angularjs后更改按钮颜色 [英] Change button color after click in Angularjs

问题描述

这就是我现在所拥有的：
index.html

 < div ng-app> 
< h2> Todo< / h2> 
< div ng-controller =TodoCtrl> 
< button class =btn btn-dangerng-click =start（）>开始< /按钮> 
< / div> 
< / div> 
 
 
函数TodoCtrl（$ scope）{
 $ scope.start = function（）{
 
}; 
} 
  

我可以填写 $ scope.start 函数，这样一旦按钮被点击，按钮的颜色就变成黄色。

解决方案

你可以使用 ng-class 定义一个像 $ scope.started = false; 真正。在您的按钮上执行此操作：
$ b ng-class ={'btn-warning'：started，'btn-danger'：！started}

另一种写法：

ng-class =started&&'btn-warning'||！started&&'btn-danger'

note：从你的curre class属性中删除 btn-danger

$ b

编辑

更新，更常用的方式是标准三元运算符（也更易于阅读）：

ng-class =started？'btn-warning'：'btn-danger'

This is what I have now: index.html

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <button class="btn btn-danger" ng-click="start()">Start</button>
  </div>
</div>


function TodoCtrl($scope) {
  $scope.start = function() {

  };
}

What can I fill in the $scope.start function so that once the button is clicked, the color of the button turns yellow.

解决方案

you can use ng-class Define a var like $scope.started = false; and inside you start function set it to true. On your button do this:

ng-class="{'btn-warning': started, 'btn-danger': !started}"

another way to write it:

ng-class="started && 'btn-warning' || !started && 'btn-danger'"

note: remove btn-danger from your curre class attribute

EDIT

The newer, more common way is the standard ternary operator (also easier to read):

ng-class="started ? 'btn-warning' : 'btn-danger'"

这篇关于点击Angularjs后更改按钮颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！