1

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.

2
  • 1
    Asumo que cuando hablas de efecto jquery, estas hablando como de algún movimiento en especifico que deba hacer la ventana o la lista, podrías poner algún gif para ver cual es el efecto? o al menos hacer un fiddle de tu ejemplo corriendo con el efecto el 23 sep. 2016 a las 21:14
  • Básicamente quieres hacer una animación de los progressbar. Agrega un gif a tu pregunta donde se vea el efecto. De lo contrario es difícil saber lo que quieres.
    – devconcept
    el 26 sep. 2016 a las 15:20

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.