jQuery function in an AngularJS way

Question

I'm moving some code from jQuery to AngularJS, but I am still having trouble understanding its logic, so switching to AngularJS caused confusion. I have the following example which I did in AngularJS:

<div class="main" ng-repeat="data in mainData">

    <div class="row forecast_daily">

        <div class="col-md-4 col-md-offset-2">
            {{ data.date.weekday }}
            {{ data.date.day }}
            {{ data.edit }}
        </div>

        <div class="col-md-3 range-index">
            <div class="range">
                <span class="min">{{ data.low }}</span>
                <span class="max">{{ data.high }}</span>
            </div>
        </div>
    </div>
</div>

But I have this jQuery function which I'm having trouble doing in an AngularJS way.

$('.range-index').each(function(){

    var min = parseInt($(this).find('.min').html()),
                max = parseInt($(this).find('.max').html());

    var l = max - (max-min);
    var w = (max-min)*20;

    $(this).find('.range').css({left:l+"%",width: w});
});

Answer 1

It looks like ng-style can work well here:

<div class="col-md-3 range-index">
    <div class="range"
         ng-style="{left: data.low + '%', width: (data.high - data.low) * 20 + 'px'}">

        <span class="min">{{ data.low }}</span>
        <span class="max">{{ data.high }}</span>
    </div>
</div>

Or better. You can create a helper function in the controller:

$scope.getStyle = function(data) {
    return {
        left: data.low + '%',
        width: (data.high - data.low) * 20 + 'px'
    };
};

And use it like this:

<div class="col-md-3 range-index">
    <div class="range" ng-style="getStyle(data)">
        <span class="min">{{ data.low }}</span>
        <span class="max">{{ data.high }}</span>
    </div>
</div>