JSFiddle - React, Tailwind, and code Playground

by Şuayip Ekmekci

HTML

<!-- ex1-2.1 (ng-mouseenter & ng-mouseleave & ng-style & module & directive & addClass & removeClass & bind) -->
<body ng-app="yeniApp">
    <div ng-controller="MyCtrl">
		<div ng-repeat="(deneme1,deneme2) in ornekOlsun">
			<span ng-Hover>{{deneme1}} = {{deneme2.text}}</span>
		</div>
	</div>
</body>

CSS

.tHi{
    background-color:red;
    color:white;
}

JavaScript

var yeniApp = angular.module('yeniApp',[]);

yeniApp.directive('ngHover', function() {
    return {
        link: function(scope, element) {
            element.bind('mouseenter', function(){
                element.addClass('tHi');
            }).bind('mouseleave', function(){
                element.removeClass('tHi');
            })
        }
    }
});

function MyCtrl($scope){
    $scope.ornekOlsun = [ // ilk listemiz
        {text:'Lorem', have:true},
        {text:'ipsum', have:false},
        {text:'dolor', have:false},
        {text:'sit', have:true},
        {text:'amet', have:false},
        {text:'consectetur', have:false},
        {text:'adipiscing', have:true},
        {text:'elit', have:false},
        {text:'Curabitur', have:false},
    ];
}