以 AngularJS 方式的 jQuery 函数

Question

我正在将一些代码从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>

但是我有这个jQuery函数，我无法以AngularJS的方式进行操作。

$('.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

看起来ng-style在这里可以很好地工作：

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

或者更好。您可以在控制器中创建帮助程序函数：

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