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

或者更好。您可以在 Controller 中创建辅助函数:

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