小编Chr*_*ris的帖子

我努力思考"角度方式",所以这无疑是一个简单的问题,但是当我点击一个按钮(最终会被着色)时,我正试图这样做,文本会变成那种颜色.这基本上是代码:

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来选择我想要使用的文本,但我不想这样做.我需要给我的段落一个模型吗？任何正确方向的推动都非常感谢 - 谢谢.

我只是想写出一段代码,显示数据绑定的特定实例是如何工作的,但它在pre标签内不断出现!即使使用{和}它仍然可以评估.我笑着发布这个问题,因为它似乎很简单,但我无法在网上找到一个简单的答案.我真的不想创建多个ng-app只是为了排除这一段代码.

代码看起来像这样(我正在使用棱镜):

预逃脱

<input type="text" placeholder="Enter a hex color" ng-model="myColor">
<p style="color: #{{myColor}};">I am color #{{myColor}}</p>

逃脱后

<pre><code class="language-markup">
    &lt;input type=&quot;text&quot; placeholder=&quot;Enter a hex color&quot; ng-model=&quot;myColor&quot;&gt;<br/>
    &lt;p style=&quot;color: #{{myColor}};&quot;&gt;I am color #&#123;&#123;myColor&#125;&#125;&lt;/p&gt;
</code></pre>

{{myColor}}也不起作用.我根本不想要那个东西来评估.