当您单击 slider 时,我想要什么,然后在其工具提示上显示文本而不是数字。
这是代码:
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 代码:
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
});
或者您可以引用以下链接https://codepen.io/ankur-tiwari/pen/bVNEKJ
最佳答案
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>
用于渲染 slider 的范围编号。 并使用以下方法来渲染它
function postLink(scope, element, attr, ngModelCtrl){
}
你可以像这样修改函数的内容
var _values = ["very low", "low", "average", "good", "best"];
thumbText.text( _values[ngModelCtrl.$viewValue] );
渲染文本而不是整数值。
关于angularjs - 如何在 angularjs Material slider 中显示文本代替数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32305012/