I have a site where I have an evaluation system that works fine with jquery, now I'm making the mobile app for this site and have to have the same evaluation system as I am new at angularjs needed your help to convert the script that I have in angular work in the app.
Script
<script>
$(function(){
$("#sent-form-msg").hide();
$('.rate-btn').mouseenter(function () {
therate = $(this).data('rate-value');
css_rate = $(this).data('rate-css');
$(this).addClass('rate-btn-hover-' + css_rate);
$("#rating_number").text(therate);
$("#rating_number_opiniao").text(therate);
var prevAll = $(this).prevAll().andSelf();
prevAll.each(function () {
$(this).addClass('rate-btn-active-' + $(this).data('rate-css'));
});
});
$('.rate-btn').on('mouseout', function () {
$(this).removeClass('rate-btn-hover-' + css_rate);
$("#rating_number").text("-");
$("#rating_number_opiniao").text("-");
var prevAll = $(this).prevAll().andSelf();
prevAll.each(function () {
$(this).removeClass('rate-btn-active-' + $(this).data('rate-css'));
});
});
$(document.body).on('click', '.rate-btn', function(e) {
var logado = "<?= $_SESSION['user_id'] ?>";
if(logado === ''){
alert("Para avaliar o estabelecimento precisa estar logado aceda ao menu login para entrar na sua conta");
}else{
var therate = $(this).data('rate-value');
var css_rate = $(this).data('rate-css');
id_user_rate = "<?= $_SESSION['user_id'] ?>";
var dataRate = 'act=rate&post_id=<?= $row->id; ?>&user_id='+id_user_rate+'&rate='+therate; //
var rates = $('.rate-btn');
rates.removeClass('rate-btn-hover-'+css_rate);
$(this).prevAll().andSelf().addClass('rate-btn-active-'+css_rate)
$("#rating_number").text(therate);
$("#rating_number_opiniao").text(therate);
$.ajax({
type : "POST",
url : "ajax/processa_avaliacao.php",
data: dataRate,
success: success()
});
function success(){
$("#avaliacao").load("ajax/mostra-avaliacao.php?id_estabelecimento=<?= $row->id; ?>");
$("#numero_votos").load("ajax/mostra-votos.php?id_estabelecimento=<?= $row->id; ?>");
$("#sent-form-msg").fadeIn();
$("#sent-form-msg").fadeOut(5500).html("<p align='center'>Avaliação Submetida com sucesso! Obrigado pelo seu voto</p>");
}
return false;
}
});
});
</script>
HTML
<div class="rate-ex1-cnt">
<div data-rate-value="0.5" class="rate-btn-1 rate-btn" data-rate-css="1"></div>
<div data-rate-value="1.0" class="rate-btn-2 rate-btn" data-rate-css="2"></div>
<div data-rate-value="1.5" class="rate-btn-3 rate-btn" data-rate-css="3"></div>
<div data-rate-value="2.0" class="rate-btn-4 rate-btn" data-rate-css="4"></div>
<div data-rate-value="2.5" class="rate-btn-5 rate-btn" data-rate-css="5"></div>
<div data-rate-value="3.0" class="rate-btn-6 rate-btn" data-rate-css="6"></div>
<div data-rate-value="3.5" class="rate-btn-7 rate-btn" data-rate-css="7"></div>
<div data-rate-value="4.0" class="rate-btn-8 rate-btn " data-rate-css="8"></div>
<div data-rate-value="4.5" class="rate-btn-9 rate-btn" data-rate-css="9"></div>
<div data-rate-value="5.0"class="rate-btn-10 rate-btn" data-rate-css="10"></div>
</div>
CSS
/* First Example with big stars */
.rate-ex1-cnt{
width:100%; height: 40px;
margin:0px 0px 0px -5px;
}
.rate-ex1-cnt .rate-btn{
width: 15px; height:40px;
float: left;
margin-left: 5px;
background: url(../img/rating/rate-btn.png) no-repeat;
cursor: pointer;
}
.rate-ex1-cnt .rate-btn-1:hover, .rate-ex1-cnt .rate-btn-hover-1, .rate-ex1-cnt .rate-btn-active-1{
background: url(../img/rating/rate-btn-hover-0.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-2:hover, .rate-ex1-cnt .rate-btn-hover-2, .rate-ex1-cnt .rate-btn-active-2{
background: url(../img/rating/rate-btn-hover-1.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-3:hover, .rate-ex1-cnt .rate-btn-hover-3, .rate-ex1-cnt .rate-btn-active-3{
background: url(../img/rating/rate-btn-hover-1.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-4:hover, .rate-ex1-cnt .rate-btn-hover-4, .rate-ex1-cnt .rate-btn-active-4{
background: url(../img/rating/rate-btn-hover-2.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-5:hover, .rate-ex1-cnt .rate-btn-hover-5, .rate-ex1-cnt .rate-btn-active-5{
background: url(../img/rating/rate-btn-hover-2.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-6:hover, .rate-ex1-cnt .rate-btn-hover-6, .rate-ex1-cnt .rate-btn-active-6{
background: url(../img/rating/rate-btn-hover-3.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-7:hover, .rate-ex1-cnt .rate-btn-hover-7, .rate-ex1-cnt .rate-btn-active-7{
background: url(../img/rating/rate-btn-hover-3.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-8:hover, .rate-ex1-cnt .rate-btn-hover-8, .rate-ex1-cnt .rate-btn-active-8{
background: url(../img/rating/rate-btn-hover-4.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-9:hover, .rate-ex1-cnt .rate-btn-hover-9, .rate-ex1-cnt .rate-btn-active-9{
background: url(../img/rating/rate-btn-hover-4.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-10:hover, .rate-ex1-cnt .rate-btn-hover-10, .rate-ex1-cnt .rate-btn-active-10{
background: url(../img/rating/rate-btn-hover-5.png) no-repeat;
}
/* End first Example with big stars */