Change CSS styles in AngularJS using jQuery

Question

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes
      });
    }
  };
  $scope.incrementLikes = function(comment) {
    comment.likes++;
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
  };  
}]);

$('a.vote_comment').on('click',function(){
	$(this).css('color','red');						
	});
$('a.vote_dis_like_comm').on('click',function(){
	$(this).css('color','green');
	});

a
{
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a ng-click="incrementLikes(comment, $index)" class="vote_comment">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
  </div>
</div>

This is very simple comment box, but I have one problem. Could you explain to me why changing the CSS style with jQuery not working? I would like change color text like/unlike onclick, but this does not work.

Why jQuery and not ngClass + ngClick? This is Angular, don't contaminate it with jQuery code — Alon Eitan
– Alon Eitan, Commented Feb 23, 2017 at 19:47
Angular is new for me, and I am changing my code in pure js and jquery and I thought that can combine jquery and angular. But now I will try do it in pure angular — Mat.Now
– Mat.Now, Commented Feb 23, 2017 at 19:52

Sachila Ranawaka · Accepted Answer · 2017-02-23 20:20:46Z

3

why don't you use ng-style to assign styles from controller like this

 $scope.incrementLikes = function(comment) {
    comment.likes++;
    $scope.likeColor = {'color': 'red'}
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
    $scope.dislikeColor = {'color': 'green'}
  };  

<a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="likeColor">Like</a>
<span class="num_vote_comm_11"> | {{comment.likes}} | </span>
<a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="dislikeColor">Unlike</a>
</div>

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
    comment.likes++;
    comment.likeColor = {'color': 'red'}
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
    comment.dislikeColor = {'color': 'green'}
  };  
}]);

a
{
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="comment.likeColor">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="comment.dislikeColor">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
  </div>
</div>

edited Feb 23, 2017 at 20:20

answered Feb 23, 2017 at 19:54

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mat.Now Over a year ago

Thank you, it's big experience for me!

Sachila Ranawaka Over a year ago

sure no problem :D

Mat.Now Over a year ago

could you look on last problem? if you add e.g. 3 comments and try click like or dislike all change color. How make that only clicked like/dislike change color? Just like $(this) in jquery

Sachila Ranawaka Over a year ago

@V.R check the demo again

Mat.Now Over a year ago

is option in Angular make loop like in JS that if textarea is empty this whole code will return false. Because now if textarea is empyt Like/Unlike is added. Thanks

Ethilium · Accepted Answer · 2017-02-23 19:55:47Z

1

You can actually do this with CSS.

a.vote_comment:active {
    color: red;
}
a.vote_dis_like_comm:active {
    color: green;
}

You can set a color for every aspect of the link:

/* unvisited link */
a:link {
    color: green;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: yellow;
}

answered Feb 23, 2017 at 19:55

Ethilium

1,2341 gold badge15 silver badges20 bronze badges

Collectives™ on Stack Overflow

Change CSS styles in AngularJS using jQuery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related