动态输入[范围]的滑块位置在Angular中更改最小/最大值？

Question

所以我有一个 input[type=range]，其中 min 和 max 属性会根据 $http 调用而改变。

  <input type="range" name="bidSlider" id="bidSlider" min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">

bid.max = 1.5 * bid.value;
bid.min = .5 * bid.value;

bid.value 在 $http 调用返回之前是未定义的。我可以将 bid.min 和 bid.max 初始化为一些默认值，但这将是一个非常糟糕的体验，因为我无法真正猜测 bid.min 和 bid.max 将是什么（它们基于 bid.min 和 bid.max）。 value)，因为 bid.value 可以低至 50，也可以高达数千。

如果我不初始化 bid.min 或 bid.max 的默认值，则范围的最小值/最大值默认为 0-100，通常滑块一直位于右侧或左侧。

处理这种情况的最佳方法是什么？

See Plunker Example

编辑：
这不是滑块跳来跳去的问题，因为它发生得非常快......这是一旦设置了bid.value，bid.min && bid.max，滑块就不会相对于新范围重新定位自己相反，滑块 (bid.value) 会相对于默认范围 0-100 重新定位自身，因此它看起来处于最小范围或最大范围，而实际上该值位于范围的中间。

Answer 1

您还可以在加载 ajax 之前隐藏元素，然后您可以显示一些加载图像，这将告诉用户 UI 控制器正在加载

<input ng-if="bid.min && bid.min" type="range" name="bidSlider" id="bidSlider" 
min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">
<img ng-if="!bid.min || !bid.max" ng-src="loadingImg.jpg" width="50" height="50">

Answer 2

所以我通过在 ajax 调用返回时附加输入来解决此问题。所以上面的 plunker 是一个非常简化的版本。在我的现实生活代码中，我在一个角度指令中执行此操作，这就是为什么它被包装到一个链接函数中。 BiddingValue:Finish 事件在带有 bid.value 的 ajax 调用返回时广播，其中 bid 对象（具有计算的最小值和最大值）作为参数。

link: function (scope, elem) {
    scope.$on('BiddingValue:Finish', function (evt, params) {
          var input = ' <input type="range" name="bidSlider" id="bidSlider" min="'+{{bid.min}}+'" max="'+{{bid.max}}+'" ng-model="bid.value" step="1">';
          elem.append(input);
          $compile(elem)(scope);
        });
    }