2013-06-14 10 views
10

में jQuery रेंज स्लाइडर को कार्यान्वित करने के लिए मैं अपने मौजूदा AngularJS ऐप में anuglar-slider का उपयोग करने का प्रयास कर रहा हूं।AngularJS

मैं लेखक का GitHub से लेखक की टिप्पणी here

मैं फ़ाइलों को नीचे से डाउनलोड (हेड टैग में) का पालन किया है और मेरे index.html

एचटीएमएल कोड में कहा:

<head> 

<link rel="stylesheet" href="css/angular-slider.css"> 
<script src="js/vendor/angular-slider.js"></script> 

</head> 
<body> 

    <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider> 

</body> 

अनुप्रयोग। जेएस (कोणीय कोड)। मैं लेखक के निर्देशों के अनुसार के रूप में दूसरी पंक्ति कहा, मुझे लगता है कि मैं कुछ वहाँ गलत

var app = angular.module('myApp', []) 
angular.module('uiSlider', []); 

app.constant('Config', 
{ 
    baseURL : "http://blah", 
    httpTimeout : 36000 
}); 
app.config(function($logProvider) { 
    $logProvider.debugEnabled(true); 
}); 
//and some other app specific code follows 

मैं ब्राउज़र में किसी भी स्लाइडर प्रतिपादन नहीं दिख रहा है ऐसा ही किया। हालांकि, ऐप में पुरानी कोणीय विशिष्ट कार्यक्षमता अभी भी काम करती है और ब्राउज़र के कंसोल में कोई त्रुटि नहीं है।

यदि आपको ऊपर समस्या नहीं मिल रही है, तो AngularJS ऐप में रेंज स्लाइडर को लागू करने के किसी भी अन्य तरीके का सुझाव देने के लिए स्वतंत्र महसूस करें।

मैं AngularJS

लिए काफी नया हूँ मुझे जानते हैं अगर तुम मुझे यहाँ भी लेखक के पुस्तकालय फ़ाइल कोड पोस्ट करने के लिए पसंद करते हैं।

स्थापित मुसीबतों:

+0

पृष्ठ पर कोई त्रुटि? – WooCaSh

+0

बेवकूफ सवाल लेकिन पूछने की जरूरत है। क्या आपने 'कोणीय' लाइब्रेरी भी शामिल की थी? – WooCaSh

+0

हाँ, मैंने किया। यही कारण है कि अन्य सभी सामान अभी भी काम करता है। प्रश्न पढ़ने योग्य बनाने के लिए, मैंने अभी अपने 'index.html' – Watt

उत्तर

9

ठीक है मैं कुछ मुसीबतों जब इस तैयारी कर रहा है, लेकिन अब यह काम कर रहा पाया

  • यह आवश्यक है AngularJS संस्करण 1.1.4 or higher
  • आप slider-template.html फ़ाइल
  • है की जरूरत है और चाहते @ पास्कल ने कहा कि आपको uiSlider:

    शामिल करने की आवश्यकता है
  • मैंने आपके लिए नीचे एक कार्यशील डेमो तैयार किया है। मुझे आशा है कि यह मदद से आप

DEMO

+0

+1। कोड के लिए धन्यवाद। मैं यह देखने के लिए परीक्षण करूंगा कि मुझे क्या याद आया। – Watt

+0

यह अब स्क्रीन पर दिखाई देता है। जब मैं 'floor =" 0.0 "छत =" 1.0 "सेट करता हूं तो यह स्लाइड नहीं करता है। मैं इसमें देख रहा हूँ यदि आप उस पर टिप्पणी कर सकते हैं तो यह बहुत मददगार होगा। – Watt

+0

@Watt आप 0 से 1 तक दाएं चाहते हैं? – WooCaSh

0

हाल ही में मैं AngularJS में सीमा स्लाइडर का इस्तेमाल किया है। यदि आप फैंसी स्लाइडर या स्लाइडर निर्देश का उपयोग करना चाहते हैं। आप इसे नीचे से प्राप्त करेंगे।

AngularJS slider directive with no external dependencies वहाँ

  • सरल स्लाइडर की तरह स्लाइडर के कई प्रकार हैं
  • रेंज स्लाइडर
  • कस्टम शैली
  • गतिशील चयन बार रंग
  • कस्टम फर्श के साथ स्लाइडर के साथ स्लाइडर के साथ
  • स्लाइडर/छत/चरण
  • स्लाइडर के साथ ticks

इसका उपयोग करना बहुत आसान है, मोबाइल अनुकूल और अनुकूलन योग्य है।

मैंने jQuery का उपयोग करके सरल स्लाइडर का उपयोग किया है। कोड नीचे दिया गया है।

स्क्रिप्ट टैग

<!-- RANGE SLIDER JS START --> 
<script> 
var slider = document.getElementById("myRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = slider.value; 

slider.oninput = function() { 
    output.innerHTML = this.value; 
} 
</script> 
<!-- RANGE SLIDER JS OVER --> 

स्क्रिप्ट से ऊपर में

<form> 
    <div class="choose_industry"> 
     <div class="form-group"> 
      <label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label> 
      <div class="col-xs-12 col-sm-8 col-md-10 col-lg-10"> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry"> 
        <label for="radio1"> 
         Commercial Trucking Transportation 
        </label> 
       </div> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry"> 
        <label for="radio2"> 
         Other Industries 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="employee_counting"> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Number of Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-user"></i></span> 
       <input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp"> 
       <!-- <span>Total Number of Employees</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0</span> 
       <span class="pull-right">25k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Enrollment Percentage (%)?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-percent"></i></span> 
       <input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per"> 
       <!-- <span>Estimated Percentage that will enroll</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0%</span> 
       <span class="pull-right">100%</span> 
       <div id="slidecontainer"> 
        <input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Annual Cost per Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-dollar"></i></span> 
       <input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost"> 
       <!-- <span>Avarage Salary and benifits per Employee</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">$0</span> 
       <span class="pull-right">$300k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost"> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

जोड़ें निम्नलिखित कोड मेरे लिए अच्छा काम कर रहा है, भी आप के लिए काम करना चाहिए।