Question

根据angular-bootstrap-slider使用bootstrap-slider。这扩展了之前关于get value as string

的问题

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

让我们说我想要蓝色＆＃39;要显示而不是红色＆＃39;

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

或者如何设置滑块的默认值？

我有一个工作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

我深入研究了代码并注意到Slider for Bootstrap（bootstrap-slider.js）使用属性＆＃34; value＆＃34;设置其初始值。 See here for examples。然后在它所在的angular-bootstrap-slider（slider.js）中传递两个属性＆＃34; ngModel＆＃34;和＆＃34;价值＆＃34;。然后，initSlider（）函数做了一些决策，并且错误地认为ngModel值是错误的。我发现如果我忽略了＆＃34; ngModel＆＃34;而只是依靠＆＃34;价值＆＃34;属性我可以默认滑块的初始值。

<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>

所以在我上面的例子中（从我的包含滑块的指令）你可以看到我已经将指令ngModel设置为滑块ng-model（我不再关心它）以及值（其中）似乎工作）。 angular-bootstrap-slider需要ng-model，所以我必须提供它，但似乎不会将值设置为相同的属性。

angular-bootstrap-slider默认值/双向绑定

1 个答案: