CODEWITHSUNDEEP
angularjsclassmouseover
Naushad Ahmad
Naushad Ahmad

Reputation: 486

On mouseover event remove class from list-item'child

<md-list layout-padding>
     <md-list-item class="md-3-line" ng-repeat="obj in value" ng-mouseover="ctrl.toggleTextTruncateClass(this)">
           <div class="md-list-item-text">
                <h3 class="text_truncate">{{obj.goalName}}</h3>
                <h4>{{obj.goalDescription}}</h4>
                <h4>{{obj.goalAchievementCount}} Achievement(s)</h4>
            </div>

            <md-divider></md-divider>
    </md-list-item>
</md-list>

I want when hover of md-list-item I want to remove class text_truncate from h3 inside list item text

I tried with 

self.toggleTextTruncateClass = function (element) {
               angular.element(document.querySelector('.md-3-line')).find('h3').toggleClass('text_truncate')
            }

Upvotes: 1

Views: 682

Answers (2)

martin
martin

Reputation: 96889

Just use ng-class to toggle the class.

<h3 ng-class="{'text_truncate': hovered}">{{obj.goalName}}</h3>

Then switch hovered variable in <md-list-item>:

<md-list-item ng-mouseenter="hovered=true" ng-mouseleave="hovered=false" ng-repeat="obj in value" class="md-3-line">

Upvotes: 2

WalksAway
WalksAway

Reputation: 2819

try using ng-mouseenter and ng-mouseleave combined with ng-class

https://docs.angularjs.org/api/ng/directive/ngMouseenter https://docs.angularjs.org/api/ng/directive/ngMouseleave https://docs.angularjs.org/api/ng/directive/ngClass

<md-list layout-padding>
  <md-list-item class="md-3-line" ng-repeat="obj in value"  ng-mouseenter="hover = true" ng-mouseleave="hover = false">
    <div class="md-list-item-text">
      <h3 ng-class="{text_truncate: hover}" class="text_truncate">{{obj.goalName}}</h3>
      <h4>{{obj.goalDescription}}</h4>
      <h4>{{obj.goalAchievementCount}} Achievement(s)</h4>
    </div>

    <md-divider></md-divider>
  </md-list-item>
</md-list>

Upvotes: 0

Related Questions