javascript - 单击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功能，以便单击按钮后，按钮的颜色变为黄色。

Answer 1

你可以使用ng-classDefine a var like$scope.started = false;并在你的start函数内部将它设置为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'"

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

Answer 3

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