如何在angularjs材质滑块中代替数字显示文本

问题描述 投票:15回答:6

enter image description here

单击滑块时我想要的是什么,然后在其工具提示上显示文本代替数字。

这是代码:

HTML:

<div ng-controller="AppCtrl" class="sliderdemoBasicUsage" ng-app="MyApp">
  <br>
  <br>
  <br>
  <br>
  <md-content style="margin: 16px; padding:16px">
    <br>
    <br>
   <md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
      </md-slider>
  </md-content>
</div>

角度代码:

angular.module('MyApp')

.controller('AppCtrl', function($scope) {
});

或者您可以参考以下链接https://codepen.io/ankur-tiwari/pen/bVNEKJ

angularjs angular-material
6个回答
4
投票

Angular Material不支持它。

有关更多细节,请检查angular-material模块的slider.js

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] );

渲染文本而不是整数值。


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

这是您可以访问的指令,并显示控制器值的值.with 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;
         });
       });
     }
   };
 }]);

1
投票

不幸的是,该功能不受支持,因为它在技术上不是material spec for sliders的一部分。

对于一个类似的比例你应该考虑selection controls spec of material。否则,您可以使用水平行radio buttons在Angular Material中使用它。


1
投票

Angular-material现在不支持此功能,您可以通过编写自己的逻辑来创建自己的逻辑,也可以创建自己的滑块。


0
投票

Material2团队已经解决了这个问题,很快就会提出解决方案。 https://github.com/angular/material2/issues/4776


0
投票

最后,在将angular.js更新为Angular之后,Angular Material为Angular滑块提供了自定义缩略图标签格式的选项。

import {Component} from '@angular/core';

/**
 * @title Slider with custom thumb label formatting.
 */
@Component({
  selector: 'slider-formatting-example',
  templateUrl: 'slider-formatting-example.html',
  styleUrls: ['slider-formatting-example.css'],
})
export class SliderFormattingExample {
  formatLabel(value: number | null) {
    if (!value) {
      return 0;
    }

    if(value < 250)
    {
        return 'Low';
    }
    else if(value > 250 && value < 750)
    {
       return 'Medium';
    }
    else
    {
        return 'High';
    }

    return value;
  }
}

Html代码:

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="1000"
  min="1"
  max="100000"></mat-slider>

注意:我将我的应用程序从angular.js更新为Angular最新版本。

© www.soinside.com 2019 - 2024. All rights reserved.