javascript - angular-bootstrap-slider 默认值/双向绑定(bind)

Question

使用 angular-bootstrap-slider基于 bootstrap-slider . 这扩展了先前关于 get value as string 的问题

我想在加载页面时将显示的值设置为第一个值以外的任何其他值。

假设我想显示“蓝色”而不是“红色”

如何设置将从另一个 $scope 返回的值。

或者我该如何设置 slider 的默认值？

我有一个工作 Plunker example和下面的代码

脚本:

  $scope.colors = [{'id': 0,'label': 'red'},{'id': 1,'label': 'blue'},{'id': 2,'label': 'green'}];

  function getAttrs(collection, attr) {
    var attrArray = [];
    angular.forEach(collection, function(item) {
      attrArray.push(item[attr]);
    }) 
    return attrArray;
  }

$scope.colorTypeSlider = {
    ticks: getAttrs($scope.colors, 'id'), // [0,1,3]
    ticks_labels: getAttrs($scope.colors, 'label'), // ['red', 'blue','green']
    ticks_snap_bounds: 50,
};

$scope.selectedColor = '';

$scope.selectColor = function ($event,value,collection) {
  console.log('value is ' + value);
  $scope.selectedColor = collection[value];
};

html:

 <slider ng-model="colors" 
        ticks="colorTypeSlider.ticks"
        ticks-labels="colorTypeSlider.ticks_labels"
        ticks-snap-bounds="colorTypeSlider.ticks_snap_bounds" 
        on-start-slide="selectColor($event,value,colorTypeSlider.ticks_labels)"></slider>
                <h6> value check is: {{selectedColor}} </h6>

Answer 1

我深入研究了代码，注意到 Bootstrap slider (bootstrap-slider.js) 使用属性“值”来设置其初始值。 See here for examples .然后在它所在的 angular-bootstrap-slider (slider.js) 中，传入两个属性“ngModel”和“value”。然后 initSlider() 函数会做一些决策，我相信会错误地处理 ngModel 值。我发现如果我忽略“ngModel”并仅依赖“值”属性，我可以默认 slider 的初始值。

<span slider range="true" 
      precision="0" 
      scale="'logarithmic'" 
      ng-model="ngModel" 
      value="ngModel" 
      min="minValue" 
      step="1000" 
      max="maxValue"
      on-stop-slide="setValue()" 
      slider-tooltip="hide">
</span>

所以在我上面的例子中(从我包含 slider 的指令)你可以看到我已经设置了指令 ngModel slider ng-model(我不再关心)和值(这似乎工作)。 ng-model 是 angular-bootstrap-slider 所必需的，所以我必须提供它，但将值设置为相同的属性似乎并没有什么坏处。