使用Angular单击时更改特定图示符图标的颜色

Change color of specific glyphicon when clicked using Angular

本文关键字：图标 颜色 单击 Angular 使用      更新时间：2023-09-26

我想更改在我的Angular应用程序中单击的特定字形图标的颜色。

例如，当点击时：

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

点击时调用：

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

谢谢。

您可以在帖子上设置属性：

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

然后检查ng样式属性中的属性：

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

当然，对于发行版，您可能更喜欢使用在其他地方定义的CSS类，并对ng类执行相同的检查来添加该类。

你必须通过绑定来驱动它，所以在你的控制器中这样做，但要确保默认值是DownVote为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放在那里。

相关文章：