使用 ng 重复鼠标悬停 ng 显示

Question

您好，我正在使用 ng repeat 显示用户列表。 我想要的是当我将鼠标悬停在用户按钮上时会出现..我离开后它会消失我试过这个.. 在我悬停后使用此代码显示整个列表的图标

HTML

<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover()" ng-mouseleave="hideHover()">
<a class="userlist" href="#" ng-click="getProfile(person)">
    <div class="hoverText">
        <div class="col-md-1 col-xs-1 text-medium text-center">
            <img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
        </div>
        <div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
        <div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
        <div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
        <div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
        <div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
    </div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="hoverIcons">
    <div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
        <i class="md-message"></i>
    </div>
    <div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
        <i class="md-email"></i>
    </div>
    <div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
        <i class="md-add-circle-outline"></i>
    </div>
</div>

js

$scope.showHover = function (){
        $scope.hoverIcons = true;
    }
    $scope.hideHover = function (){
        $scope.hoverIcons = false;
    }

Answer 1

您面临的问题是由于您的 $scope.hoverIcons 变量上缺少索引引起的。 你应该为你的变量名添加和索引以获得每个人的布尔值。

<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons track by $index" ng-mouseover="showHover($index)" ng-mouseleave="hideHover($index)">
<!-- more code here -->
    <div ng-show="hoverIcons{{$index}}">
         <!-- more code here -->
    </div>
</div>

另外你应该在 js 中使用这个索引：

$scope.showHover = function (index){
    $scope['hoverIcons' + index] = true;
}
$scope.hideHover = function (index){
   $scope['hoverIcons' + index]  = false;
}

希望对你有帮助

Answer 2

你可以这样做；

<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover(person)" ng-mouseleave="hideHover(person)">
  <a class="userlist" href="#" ng-click="getProfile(person)">
    <div class="hoverText">
      <div class="col-md-1 col-xs-1 text-medium text-center">
        <img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
      </div>

      <div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
      <div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
      <div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
      <div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
      <div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
    </div>
  </a>

  <div class="col-md-2 col-xs-2 no-padding">
    <button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
  </div>

  <div ng-show="person.hoverIcons">
    <div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
      <i class="md-message"></i>
    </div>

    <div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
      <i class="md-email"></i>
    </div>

    <div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
      <i class="md-add-circle-outline"></i>
    </div>
  </div>
</div>

.

$scope.showHover = function (person) {
  person.hoverIcons = true;
}

$scope.hideHover = function (person) {
  person.hoverIcons = false;
}

Answer 3

如果使用 CSS 不是问题，请尝试此操作。 然后您可以删除 ng-mouseover 指令

<style>
    .hoverText .hoverIcons {
      display:none;
    }
    .hoverText:hover .hoverIcons {
      display:block;
    }
</style>
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons">
  <a class="userlist" href="#" ng-click="getProfile(person)">
    <div class="hoverText">
      <div class="col-md-1 col-xs-1 text-medium text-center">
        <img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
      </div>
      <div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
      <div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
      <div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
      <div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
      <div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
    </div>
  </a>
  <div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'"
      ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
  </div>
  <div class="hoverIcons">
    <div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
      <i class="md-message"></i>
    </div>
    <div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
      <i class="md-email"></i>
    </div>
    <div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
      <i class="md-add-circle-outline"></i>
    </div>
  </div>
</div>