NickName:NiBu Ask DateTime:2016-12-01T09:22:23

ng-mousover to select ONLY the hovered element not all elements - using ng-repeat

I need to add and remove a class to an element on mouseover. The method below adds and removes classes from all elements with classname .blogOverlay and .newOverlay.

I need it to add/remove the class ONLY on the element that is being hovered over.

JS:

$scope.showReadMore = function(){
  $('.blogOverlay').addClass("hidden");
  $('.newOverlay').removeClass('hidden');
}
$scope.hideReadmore = function(){
  $('.blogOverlay').removeClass("hidden");
  $('.newOverlay').addClass('hidden');
}

HTML:

  <div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" >
                            <a ng-click="goToPostDetail(post, $index)" >
                              <img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt=""  />
                              <div class="blogOverlay" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
                                  <h2>{{ post.fields.title }}</h2>
                              </div>

                              <div class="newOverlay hidden" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
                                  <h2>{{ post.fields.title }}</h2>
                                  <h3>{{post.fields.date}}</h3>
                                  <a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
                              </div>
                            </a>
                        </div>

Copyright Notice：Content Author:「NiBu」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/40901119/ng-mousover-to-select-only-the-hovered-element-not-all-elements-using-ng-repea

Answers

lealceldeiro 2016-12-01T01:54:36

There is no need to use jquery. Just use ng-class and add a condition to show or hide that class to your post. Se snipped how content is shown or hidden with the hidden class according to property post.readMore in the controller\n\n\r\n\r\nangular.module('myapp', [])\r\n .controller('foo', function($scope) {\r\n\r\n $scope.post = {\r\n readMore: true,\r\n fields: {\r\n title: 'The post title',\r\n date: new Date()\r\n }\r\n }\r\n\r\n $scope.showReadMore = function(post) {\r\n post.readMore = true;\r\n }\r\n $scope.hideReadmore = function(post) {\r\n post.readMore = false;\r\n }\r\n\r\n\r\n });\r\n<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js\"></script>\r\n\r\n <style type=\"text/css\">\r\n .hidden {\r\n display: none;\r\n }\r\n </style>\r\n\r\n</head>\r\n\r\n<body ng-app=\"myapp\">\r\n <div ng-controller=\"foo\">\r\n\r\n <div ng-if=\"!post.firstFeatured\" class=\"col-sm-10 blog-content blogPreview\" style=\"max-width: 400px\">\r\n <a ng-click=\"goToPostDetail(post, $index)\">\r\n <img class=\"img-responsive img-blog\" ng-src=\"{{ post.fields.image.fields.file.url }}\" width=\"100%\" alt=\"\" />\r\n\r\n <div class=\"blogOverlay\" ng-class=\"{'hidden' : !post.readMore}\" ng-mouseover=\"showReadMore(post)\" ng-mouseleave=\"hideReadmore(post)\">\r\n <h2>{{ post.fields.title }}</h2>\r\n </div>\r\n\r\n <div class=\"newOverlay\" ng-class=\"{'hidden' : post.readMore}\" ng-mouseleave=\"showReadMore(post)\" ng-mouseover=\"hideReadmore(post)\">\r\n <h2>{{ post.fields.title }}</h2>\r\n <h3>{{post.fields.date}}</h3>\r\n <a class=\"btn btn-primary readmore\" ng-click=\"goToPostDetail(post, $index)\">Read More</a>\r\n </div>\r\n\r\n </a>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</body>\r\n\r\n</html>",

Rohit Shedage 2016-12-01T01:33:05

give class name something like class=\"blogOverlay_{{$index}}\" and then pass $index to JavaScript like showReadMore($index)\n\nThis way Your class names are unique and they will change for only index you want to change",