Question

所以我有一个输入[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;

在$ http调用回来之前，

bid.value是未定义的。我可以初始化bid.min＆amp; bid.max是一个默认值，但这将是一个非常糟糕的经历，因为我无法真正猜出bid.min和bid.max将是什么（它们基于bid.value），因为bid.value可以低至50，也可以高达数千。

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

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

See Plunker Example

修改：
这不是滑块跳跃的问题，因为它发生得非常快......这就是，一旦bid.value，bid.min＆amp;＆amp; amp;，滑块就不会相对于新范围重新定位。 bid.max设置为相反，滑块（bid.value）相对于默认范围0-100重新定位自身，因此它看起来处于最小范围或最大范围，而实际上该值落在范围的中间

Answer 1

你也可以隐藏元素，直到ajax加载＆amp;到那时你可以显示一些加载图像，这会告诉用户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是一个非常简化的版本。在我的现实代码中，我在一个角度指令中这样做，这就是它被包装到链接函数中的原因。当bid.value的ajax调用返回时，BiddingValue：Finish事件将被广播，其中bid对象（具有计算的min和max）为params。

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);
        });
    }

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

2 个答案: