javascript - 绑定(bind)范围输入以修改样式？

Question

我想要一个 slider 来控制多个 div 的高度和宽度，但是，我似乎无法让它们正确绑定(bind)。

<div ng-controller="SizeCtrl">
    <input type="range" min="100" max="200" ng-model="sliderval" />
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 1</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 2</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 3</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 4</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 5</div>
</div>

https://jsfiddle.net/nopctoday/dnvwbywv/3/

Answer 1

试试我的修复: https://jsfiddle.net/dnvwbywv/4/

我不得不将 ng-app 添加到您的代码中，还更改了绑定(bind)样式的方式。

<div class="box" style="height:{{sliderval}}px; width:{{sliderval}}px"> Box 1</div>