Javascript 动态更改文本颜色AngularJS

我很难思考“角度的方式”，所以这无疑是一个简单的问题，但我试图让它成为这样，当我点击一个按钮（最终将被着色）时，文本会变成那个颜色。下面是代码：

JS

var myApp = angular.module('myApp', []);

myApp.controller('ColorCtrl', ['$scope', function($scope){

    $scope.changeColor = function(value){
        return {"color:" value };
    }

    $scope.turnGreen = function (){
        //what to do here?
    }

    $scope.turnBlue = function() {
        //and here?
    }
}]);

HTML

<div ng-app="myApp" ng-controller="ColorCtrl">

    <button ng-click="turnBlue()">Make text blue</button>
    <button ng-click="turnGreen()">Make text green</button>

    <p ng-style="changeColor(value)">I should be either green or blue!</p>

</div>

使文本为蓝色
使文本变为绿色
我应该是绿色或蓝色

我知道我可以很容易地使用jQuery来选择我想要处理的文本，但我不想这样做。我需要给我的段落一个模型吗？非常感谢您向正确的方向努力。谢谢。

您可以这样做：

将ng class指令和值定义为将在范围内设置的

colorClass

<p ng-class="customStyle.colorClass">I should be either green or blue!</p>

还有一些规则：

.green{
  color:green;
}
.blue{
  color:blue;
}

或者使用内联样式

 <p ng-style="customStyle.style">I should be either green or blue!</p>

---

你看到这里的例子了吗：它没有控制器就完成了。我应该为没有检查相应的文档而问问题感到羞耻。感谢您的帮助，这正是我想要的。正如我在下面提到的，我创建了一个jsbin：我建议将$scope.colorClass更改为$scope.data.colorClass，以避免在更复杂的场景中出现原型问题。我的例子和你的很相似：我试图解释我的意思，但这里没有足够的空间来解释。为了更好地理解，请查看以下两个链接：以及下面三分钟的内容：因此，在解析基本属性时，不需要参考总结原型链，因此您应该使用对象作为属性，这样属性就不会受到阴影。@MikeCheel感谢jsbin，这对我的尝试有所帮助。

 <p ng-style="customStyle.style">I should be either green or blue!</p>

$scope.customStyle = {};
$scope.turnGreen = function (){
    //what to do here?
    $scope.customStyle.style = {"color":"green"};
}

$scope.turnBlue = function() {
    $scope.customStyle.style = {"color":"blue"};
}