在Angularjs中点击按钮后改变按钮颜色

Question

这是我现在拥有的内容： 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函数中填入什么内容，以便使按钮的颜色变为黄色。

- puscan

Answer 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'"

- Ronnie

---

我对Angularjs非常陌生。按照这些步骤后，按钮仍然没有变成黄色。我还需要做更多的更改吗？ - puscan

你在使用Bootstrap吗？btn-danger是红色按钮，而btn-warning是黄色的...当然，前提是你正在使用Bootstrap。 - Ronnie

太好了，现在它正在运行！另一个问题是，如果我在按钮中添加ng-disabled属性，怎样才能在ng-disabled等于true之后使按钮变灰？非常感谢。 - puscan

想要为按钮的两种状态“激活”和“未激活”设置两种不同的颜色（灰色和蓝色）。请帮忙，谢谢。 - Sagar Devanga

@SagarDevanga，可以创建一个包含所需颜色的类，并使用同样的逻辑。 - Ronnie

@Ronnie，我还是不明白，请你能否上传代码？ 我是AngularJS的新手。 谢谢。 - Sagar Devanga

Answer 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";
}

- El Dude