单击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-class定义一个类似$scope.started = false;的var，在你启动函数中将它设置为true。在你的按钮上这样做：

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

另一种写作方式：

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

注意：从您的curre类属性中删除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