using ng repeat mouseover ng show

Question

Hi i am displaying a user list using ng repeat. what i want is when i hover over the user buttons will appear.. and after i leave it will disappear i tried this pls .. with this code after i hoveer it show icons for whole list

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

Try first fixing your
tag which is not being closed correct by a matching
tag — daan.desmedt, Jun 22 '16 at 08:35

score 0 · Answer 1 · answered Jun 22 '16 at 08:40

The issue your facing is caused by the missing of an index on your $scope.hoverIcons variable. You should add and index to your variable name to get a boolean for each person.

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

in addition you should use this index in js :

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

I hope it may helps

score 0 · Answer 2 · answered Jun 22 '16 at 08:42

You can do this as follows;

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

score 0 · Answer 3 · answered Jun 22 '16 at 09:09

try this if using of CSS is not an issue. You can then remove ng-mouseover directives

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

using ng repeat mouseover ng show

3 Answers3