使用Angular单击时更改特定glyphicon的颜色

Question

我想更改在我的Angular应用中点击的特定glyphicon的颜色。

例如，点击它时：

1   b
2   c
0   a
remove: q.data[q.first]=    a     q.first=  0
remove: rval=   nil
remove: q.first=    1
list item=  nil

点击后，它会调用：

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

谢谢。

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

你必须通过绑定来驱动它，所以在你的控制器中这样做，但要确保你默认isDownVote为true或false

$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>

某种颜色是你可以把你的css打造的类。