[英]jQuery function in an AngularJS way
I'm moving some code from jQuery to AngularJS, but I am still having trouble understanding its logic, so switching to AngularJS caused confusion. 我正在将一些代码从jQuery转移到AngularJS,但我仍然无法理解其逻辑,因此切换到AngularJS会引起混淆。 I have the following example which I did in 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>
But I have this jQuery function which I'm having trouble doing in an AngularJS way. 但是我有这个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});
});
It looks like ng-style
can work well here: 看起来
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.