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

您可以按照以下方式执行此操作;

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

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

EXTRA_DIST

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>

使用ng repeat mouseover ng show

3 个答案: