Wie Silder

Question

Was ich will, in AngularJS Materialien Text anstelle der Nummer angezeigt wird, wenn Sie auf den Schieberegler klicken, dann auf seinem Tooltip es Text anstelle von Nummer.

Answer 1

Angular-Material es nicht unterstützt.

für weitere Einzelheiten überprüfen slider.js Winkelstoffmodul

function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdTheming, $mdGesture, $parse, $log) { 
    return { 
    scope: {}, 
    require: '?ngModel', 
    template: 
     '<div class="md-slider-wrapper">\ 
     <div class="md-track-container">\ 
      <div class="md-track"></div>\ 
      <div class="md-track md-track-fill"></div>\ 
      <div class="md-track-ticks"></div>\ 
     </div>\ 
     <div class="md-thumb-container">\ 
      <div class="md-thumb"></div>\ 
      <div class="md-focus-thumb"></div>\ 
      <div class="md-focus-ring"></div>\ 
      <div class="md-sign">\ 
      <span class="md-thumb-text"></span>\ 
      </div>\ 
      <div class="md-disabled-thumb"></div>\ 
     </div>\ 
     </div>', 
    compile: compile 
    }; 

in diesem Code

<span class="md-thumb-text"></span> 

verwendet wird, auf den Bereich Nummer des Gleitstücks Render. und folgende Verfahren wird verwendet, es

function postLink(scope, element, attr, ngModelCtrl){ 
} 

Sie ändern Inhalt der Funktion wie dieser Text eher Integer-Wert zu machen

var _values = ["very low", "low", "average", "good", "best"]; 
thumbText.text(_values[ngModelCtrl.$viewValue]); 

kann zu machen.

Answer 2

Leider wird diese Funktionalität nicht unterstützt, da sie technisch nicht zum material spec for sliders gehört.

Für eine Likert-Skala sollten Sie die selection controls spec of material betrachten. Andernfalls können Sie in einer horizontalen Reihe von radio buttons in Angular Material durchkommen.

Answer 3

<p ng-bind="val" ng-init="val=20"></p> 
      <div class="slider" ui-jq="slider" ng-slider-model="val" ui-options="sliderOpt4"></div> 
      </div> 

Hier ist die eine Richtlinie Sie und den Wert der Controller-Wert zeigen zugreifen können ..mit HTML und CSS

.directive('ngSliderModel', ['$parse', function($parse) { 
    return { 
    scope: { 
     ngSliderModel: '=', 
     uiOptions: '=' 
    }, 
    restrict: 'A', 
    required: ['ngSliderModel'], 
    link: function(scope, element, attrs) { 
     // check there is uiOption or not 
     var options = ('uiOptions' in attrs) ? scope.uiOptions : {}; 
     // get the value of ngSlider Model 
     var val = scope.ngSliderModel; 
     // if value is range [15,25] then return values for uiOptions propertyName else value for singles 
     var propName = (angular.isArray(val)) ? 'values' : 'value'; 
     /* if you want to slide when the scope value changed not from slider... 
     watch the ngSliderModel attribute 
     */ 
     scope.$watch('ngSliderModel', function(newValue){ 

     element.slider(propName, newValue); 
     }); 
     // set value for options 
     options[propName] = val; 
     // binding slide event 
     element.bind('slide', function() { 
     // Read the current value 
     var value = element.slider('option', propName); 

     scope.$apply(function() { 
      // Apply the value to scope 
      scope.ngSliderModel = value; 
     }); 
     }); 
    } 
    }; 
}]); 

Answer 4

Angualar-Material Dosis nicht unterstützen diese Funktion jetzt, wie auch immer Sie diese Sache tun können, indem Sie Ihre eigene Logik schreiben oder Sie können Ihren eigenen Slider erstellen.

Answer 5

Material2-Team hat dieses Problem aufgegriffen und wird wahrscheinlich in Kürze mit der Lösung kommen. https://github.com/angular/material2/issues/4776