silder

Question

AngularJS सामग्री में नंबर के स्थान पर पाठ प्रदर्शित करने के लिए कैसे क्या मैं चाहता हूँ कि जब आप अपने टूलटिप पर स्लाइडर पर क्लिक करें, तो यह नंबर के स्थान पर पाठ को दिखाने के।

Answer 1

कोणीय सामग्री इसका समर्थन नहीं करता नियंत्रक मूल्य ..with HTML और सीएसएस का मूल्य दिखा सकते हैं।

और अधिक विस्तार के लिए

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

की तरह समारोह के सामग्री को संशोधित पाठ बल्कि पूर्णांक मान रेंडर करने के लिए कर सकते हैं प्रयोग किया जाता है।

Answer 2

दुर्भाग्य से कार्यक्षमता समर्थित नहीं है क्योंकि यह तकनीकी रूप से material spec for sliders का हिस्सा नहीं है।

एक समानता के पैमाने के लिए आपको selection controls spec of material पर विचार करना चाहिए। अन्यथा, आप radio buttons की क्षैतिज पंक्ति का उपयोग करके कोणीय सामग्री में इसके साथ दूर हो सकते हैं।

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> 

यहाँ एक निर्देश आप तक पहुंचने और उसे

.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

अंगुलर-भौतिक खुराक इस सुविधा का समर्थन नहीं करता है अभी आप अपना खुद का तर्क लिखकर यह कैसे कर सकते हैं या आप अपना खुद का स्लाइडर बना सकते हैं।

Answer 5

सामग्री 2 टीम ने इस मुद्दे को उठाया है और शायद जल्द ही समाधान के साथ आ गया है। https://github.com/angular/material2/issues/4776