Estoy trabajando con maquetas y tengo el siguiente código jQuery:
$('.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});
}
});
el cual necesito adecuarlo a Angularjs. Estoy trabajando con listas y ng-repeat
como sigue:
<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>
Como ven se ejecuta el ng-repeat
y está generando td
de acuerdo a lo que traiga la lista. Lo que no logro es darle el efecto que tenía con jquery.
Alguna ayuda les agradecería.