CODEWITHSUNDEEP
jqueryangularjs
Mat.Now
Mat.Now

Reputation: 1725

Change CSS styles in AngularJS using jQuery

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.

Upvotes: 3

Views: 1495

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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>

Upvotes: 3

Ethilium
Ethilium

Reputation: 1234

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;
}

Upvotes: 1

Related Questions