javascript - "range"输入定义中的 AngularJS 表达式

Question

我发现，范围输入仅支持“min”和“max”属性中的字符串，不仅如此，它还要求在初始化期间这样做。因此，以下代码不起作用:

<ion-item ng-repeat="axis in csCtrl.backupConfig.yaxes" ng-init="csCtrl.initAxisValues()">
    <div class="item range range-positive">
        <input type="range" min="{{axis.min}}" max="{{axis.max}}" ng-model="csCtrl.rangesMin[$index]"/>
    </div>
</ion-item>

元素将初始化，但如果 axis.max 和 mg-model 中的值等于，例如 1200， slider 的指针将停在开始处，值 100。我认为会出现这个问题，因为输入元素的初始化速度比 Angular 为 min 和 max 赋值的速度快。

这是类似的代码笔，请注意第一个范围如何在开始时停止，但“max”参数中具有显式字符串的第二个范围可以正常工作:http://codepen.io/anon/pen/kqAlv

有什么解决办法吗？我想过通过 jQuery 手动构造输入元素，但我担心这会破坏内部的 Angular 表达式。

Answer 1

也许你可以使用 ng-if 来检查 axis.min 中是否存在一个值，这样当 Angular 为其赋值时就会创建 dom 元素

<ion-item ng-repeat="axis in csCtrl.backupConfig.yaxes" ng-init="csCtrl.initAxisValues()">
    <div class="item range range-positive" ng-if="axis.min > 0">
        <input type="range" min="{{axis.min}}" max="{{axis.max}}" ng-model="csCtrl.rangesMin[$index]"/>
    </div>
</ion-item>