在Angularjs中单击后更改按钮颜色答案

【问题标题】：Change button color after click in Angularjs在Angularjs中单击后更改按钮颜色
【发布时间】：2018-03-05 10:02:35
【问题描述】：

这就是我现在拥有的： 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() {

  };
}

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

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您可以使用ng-class 定义一个类似$scope.started = false; 的变量，然后在您的启动函数中将其设置为true。在您的按钮上执行以下操作：

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

另一种写法：

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

注意：从你的当前类属性中删除 btn-danger

编辑

更新、更常用的方法是标准三元运算符（也更容易阅读）：

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

【讨论】：

我对 Angularjs 真的很陌生。执行此步骤后，按钮仍然没有变黄。我还应该做出什么改变？
你在使用引导程序吗？ btn-danger 是一个红色按钮， btn-warning 是黄色的......当然你正在使用引导程序
太好了，它现在可以工作了！另一个问题是，如果我在我的按钮中添加了ng-disabled属性，那么在ng-desabled等于true之后如何让按钮变灰？非常感谢
希望有 2 种不同的颜色（灰色和蓝色）用于按钮 ACTIVE 和 INACTIVE 的 2 种状态。请帮助谢谢
@SagarDevanga 所以用你想要的颜色创建一个类并使用相同的逻辑

【解决方案2】：

可能最好的方法是将按钮样式绑定到变量，如下所示：

<button class="button button-block {{buttonStyle}}" ng-click="start()">
    {{buttonText}}
</button>

并在您的范围内定义 buttonStyle 和 buttonText

$scope.buttonText = "Start";
$scope.buttonStyle="button-calm";

$scope.start = function(){
    $scope.buttonText = "Clicked!";
    $scope.buttonStyle="button-assertive";
}

【讨论】：

【解决方案3】：

这可以使用指令轻松完成。你可以看看这个。 https://www.youtube.com/watch?v=sYexGR7FQX0

【讨论】：