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

Question

Using angular-bootstrap-slider based on bootstrap-slider . This extends a previous question regarding get value as string

I want to set the shown value when the page is loaded to be any other value than the first one.

Let's say I want 'blue' to be shown and not 'red'

How do I set a value that will be returned from another $scope.

Or perhaps how do I set the default value of the slider?

I have a working Plunker example and code below

script:

  $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

I had a dig into the code and noticed that the Slider for Bootstrap (bootstrap-slider.js) uses the attribute "value" to set its initial values. See here for examples . Then in the angular-bootstrap-slider (slider.js) which this sits on, passes in two attributes "ngModel" and "value". The initSlider() function then does some decision making and messes around with the ngModel value incorrectly I believe. I found that if I ignore the "ngModel" and just rely on the "value" attribute I could default the initial value of the 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>

So in my case above (from my directive containing the slider) you can see I have set the directives ngModel the both the sliders ng-model (which I don't care about anymore) and also the value (which seems to work). ng-model is required by angular-bootstrap-slider so I had to provide it but it doesn't seem to hurt setting the value to the same attribute.