Question

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

我希望在md-list-item的鼠标悬停时我想从列表项文本中的h3中删除类text_truncate

我试过

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

Answer 1

只需使用ng-class切换课程。

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

然后在hovered中切换<md-list-item>变量：

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

Answer 2

尝试使用ng-mouseenter和ng-mouseleave结合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>

在mouseover事件中从list-item'child中删除class

2 个答案: