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

时间:2015-04-28 19:57:41

标签: javascript angularjs

所以我有一个输入[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重新定位自身,因此它看起来处于最小范围或最大范围,而实际上该值落在范围的中间

2 个答案:

答案 0 :(得分:0)

你也可以隐藏元素,直到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">

答案 1 :(得分:0)

所以我通过在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);
        });
    }