Javascript 以AngularJS方式实现jQuery函数

我正在将一些代码从jQuery迁移到AngularJS，但我仍然无法理解其逻辑，因此切换到AngularJS会造成混乱。我在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>

---

看起来

ng样式

在这里可以很好地工作：

<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>

然后像这样使用它：

<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>

{{data.low}
{{data.high}

Wow！那很容易。角度真的很容易。谢谢！：）很乐意帮忙！棱角分明的岩石！

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

<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>