Как отображать текст вместо номера в угловых материалах

введите описание изображения здесь

Что я хочу, когда вы нажимаете на слайдер, а затем на его всплывающей подсказке отображает текст вместо номера.

Ответы

Ответ 1

Angular Материал не поддерживает его.

для более подробной проверки slider.js из angular -материального модуля

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

внутри этого кода

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

используется для отображения номера диапазона ползунков. и для его отображения используется следующий метод

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

вы можете изменить содержимое функции следующим образом

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

чтобы сделать текст довольно целочисленным.

Ответ 2

Доза Angualar-material не поддерживает эту функцию прямо сейчас, как вы можете это сделать, написав свою собственную логику или вы можете создать свой собственный слайдер.

Ответ 3

К сожалению, эта функциональность не поддерживается, поскольку она не является технически частью спецификации для слайдеров.

Для шкалы ликеров вы должны рассмотреть выбор управления спецификацией материала. В противном случае вы можете уйти с ним в Angular Материал, используя горизонтальную строку радиокнопки.

Ответ 4

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

Вот директива, к которой вы можете получить доступ, и показать значение значения контроллера.. с html и 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;
         });
       });
     }
   };
 }]);