使用Angular點擊時更改特定圖形的顏色

Question

我想更改Angular應用程序中點擊的特定圖形的顏色。

例如，當這點：

(in ng-repeat block) <span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)" ></span> 

當點擊它調用：

$scope.downvote = function(post) { 
    posts.downvote(post); 
    } 
}; 

謝謝。

Answer 1

您可以在崗位設置屬性：

$scope.downvote = function(post) { 
    posts.downvote(post); 
    post.hadDownvote = true; 
}; 

然後檢查屬性中的NG-style屬性：

<span ng-style="post.hadDownvote ? {color:'red'} : {}" class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)"></span> 

自然，釋放你可能更願意使用一個CSS類在其他地方定義，並執行與ng-class相同的檢查以添加該類。

Answer 2

您還可以在烏爾控制器綁定所以駕駛它這樣做，但確保üassing默認isDownVote爲真或假

$scope.downvote = function(post) { 
    posts.downvote(post); 
    post.isDownVoted = !post.isDownVoted; 
}; 

然後在烏拉圭回合的HTML做到這一點

<span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)" ng-class="post.isDownVoted===true ? 'some-color' : ''" ></span> 

some-顏色是烏爾班，你可以把你的CSS。