Home/ Questions/Q 8882605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T20:37:16+00:00

I’m filling in an array in angularJS using $http.get() service, by calling a rest

  • 0

I’m filling in an array in angularJS using $http.get() service, by calling a rest api. This array is displayed using ng-repeat. There is Jquery code to display a button on hovering over each of the <li> tags. $http causes a delay in fetching the data, by which time Jquery would have finished binding. So the hover function doesn’t work. Any work arounds for this?

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="angular.js"></script>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    myFunction();
});
var myFunction= function(){
$("#orders ul li").hover(
        function() {
            $(this ).find(".butt-view").show();
        },
        function() {
            $(this ).find(".butt-view").hide();
        });
}
</script>
<script>
function PhoneListCtrl($scope) {
    $scope.phones = $http.get(url);
}
</script>
<style>
ul{list-style-type:none;}
ul li{background-color:#e1eff2; padding:5px 6px;}
ul li:hover{background-color:#fff;}
.butt-view{background-color:#feb801; border-radius:4px; color:#fff; font: bold 12px Arial, Helvetica, Sans-serif; padding:5px 7px; margin-top:3px; width:40px }
</style>
</head>
<body ng-controller="PhoneListCtrl">
<div id="orders">
<ul>
<li ng-repeat="phone in phones" >
  {{phone.name}}
  <p>{{phone.snippet}}</p>
  <p class="butt-view">View</p>
</li>
</ul>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use event delegation, which is better approach introduced by the new .on() jQuery method, to do it just replace your following code:

    $("#orders ul li").hover(
        function() {
            $(this ).find(".butt-view").show();
        },
        function() {
            $(this ).find(".butt-view").hide();
        });

    for this one:

    $("#orders").on('mouseenter mouseleave', 'li', function(event) {
     if (event.type == 'mouseenter') {
         $(this ).find(".butt-view").show();
     } else  {
         $(this ).find(".butt-view").hide();
     }
});

    This way you will attach your event handler to your #orders div, instead of the individual li elements, when a li element is hovered the event will bubble up till gets to your handler on #orders. This approach is more eficient and will work for dinamycally added new li’s.

    By the way I’m using mouseenter mouseleave events which are equivalent to hover and are more readable in my opinion.

    • 0