使用 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

您可以在 post 上设置属性:

$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 class 并使用 ng-class 执行相同的检查以添加 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>

some-color 是你的 class 你可以把你的 css.

Change color of specific glyphicon when clicked using Angular