I have these buttons, which I generate according to the number of records (that I bring from a database) with an ng-repeat
AngularJS button, and I want them to turn green when I put the mouse over them (like the success
bootstrap button) and that in instead of "Lost" say "Found". How could I do that with jQuery? I have already tried several other codes to see if they worked for me and they did not work.
And here I leave the part of the index.html where I generate the buttons:
<!-- MAIN CONTENT -->
<div id="mainContent" class="container-fluid">
<!-- aca hay 2 section más antes de la lista -->
<!-- LIST OF MISSING DOGS -->
<section id="view" class="row row-content" ng-controller="MainController">
<div class="col-xs-offset-3 col-xs-7 well">
<div class="col-xs-offset-3 col-xs-9">
<h1>View the list of Missing Dogs</h1>
</div>
<div class="col-xs-offset-2 col-xs-10">
<div class="form-group">
<label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
<div class="col-xs-8 col-xs-offset-1">
<input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
</div>
</div>
<div class="col-xs-10">
<table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
<thead>
<tr>
<th>Name</th>
<th>Race</th>
<th>Description</th>
<th>Place</th>
<th>¿Found?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mascota in mascotas | filter: {raza : query}">
<td>{{ mascota.nombre }}</td>
<td>{{ mascota.raza }}</td>
<td>{{ mascota.descripcion }}</td>
<td>{{ mascota.lugar }}</td>
<td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)"><span>Lost</span></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
EDIT: I add the code that didn't work for me, I think it's in JavaScript.
$(document).ready(function() {
$('.btn').hover(function() {
$(this).html('Found');
}, function() {
$(this).html('Lost');
});
});