I'm working with models and I have the following jQuery code:
$('.progress-bar').each(function(i,e){
var $this = $(this);
var $percent = $("<div class=\"percent\"></div>");
var $value = $this.attr("data-value");
$this.append($percent);
$percent.css( {'background': $this.attr("data-color")});
$percent.animate({width: $this.attr("data-percent") + '%'}, 350);
if ($value != undefined && $value != "") {
$divvalue = $("<span class=\"txt\">"+$value+"</span>");
$this.append($divvalue);
$divvalue.animate({'left': $this.attr("data-percent")+'%', opacity: 1});
}
});
which I need to adapt to Angularjs. I am working with lists and ng-repeat
as follows:
<table>
<tr ng-repeat="internetPrincipal in internetListaBolsaPrincipalInternet">
<td width="30%">{{internetPrincipal.nombreBolsa}}</td>
<td>
<div class="progress-bar" data-color="#d52b1e" data-percent="25" data-value="{{internetPrincipal.bolsaUtilizada}}" >
<span>{{internetPrincipal.bolsaTotal - internetPrincipal.bolsaUtilizada}} {{internetPrincipal.unidadConsumo}} restantes</span>
</div>
</td>
<td width="100">{{internetPrincipal.bolsaTotal}}{{internetPrincipal.unidadConsumo}}</td>
</tr>
</table>
As you can see, the ng-repeat
is executed and is generating td
according to what the list brings. What I do not achieve is to give it the effect it had with jquery.
Some help I would appreciate.