AngularJS ng-mouseover

Example application ng-mouseover and ng-mouselea

by masudcsesust04

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://mgcrea.github.com/angular-strap/js/angular-strap.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
    <h2>Book List</h2>
    <ul>
        <li ng-repeat="book in books" id="{{book.id}}" ng-mouseover="setMouseOver(book.id)" ng-mouseleave="setMouseLeave(book.id)">
            {{book.name}}
            <a href="/" bs-tooltip="tooltip.title" data-placement="right" id="remove_{{book.id}}" ng-show="false">
                <i class="icon-remove"></i></a></li>
    </ul>        
    <!-- <pre>{{books | json}}</pre> -->
</div>

JavaScript

'use strict';

var app = angular.module('myApp', ["$strap"]);

app.controller('AppCtrl', function($scope){                                 
    $scope.books = [
        {id: 1, name: "Introduction to computer programming"},
        {id: 2, name: "Discreate mathmatics"},
        {id: 3, name: "Introduction to circuit analysis"},
        {id: 4, name: "Data structure"},
        {id: 5, name: "Algorithms"}
    ];
    $scope.tooltip = {
        title: "Delete this book!",    
      };
    $scope.setMouseOver = function(book_id){      
        angular.element('#remove_'+book_id).show();
    };
    $scope.setMouseLeave = function(book_id){
        angular.element('#remove_'+book_id).hide();
    };
    // console.log($scope.books);
});