AngularJS

içinde jQuery aralığı kaydırıcısını uygulamak için var olan AngularJS uygulamasında anuglar-slider kullanmaya çalışıyorum. AngularJS

Ben yazarın github dan (Baş etiketinde) Ben dosyalar aşağıda indirilen yazarın yorumlarını here

izledi ve benim index.html

HTML kodu eklenen:

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

App. js (Açısal kod). Ben Yazarın talimatlara göre ikinci satırı eklendi, ben tarayıcıda herhangi kaydırıcı oluşturmayı görmüyorum

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

orada yanlış bir şey yaptın şüpheli. Ancak, uygulamadaki eski Angular özgü işlevselliği hala çalışıyor ve tarayıcı konsolunda bir hata yok.

Yukarıdaki sorunu bulamıyorsanız, AngularJS uygulamasında aralık kaydırıcısını gerçekleştirmenin başka bir yolunu önermek için çekinmeyin.

Sana burada da Yazarın kütüphane dosyası kodunu göndermek için benim gibi bana bildirin angularjs

için oldukça yeni.

kurulan sıkıntıları:

kaynak

2013-06-14 Watt

Sayfadaki hatalar var mı? – WooCaSh

Aptal soru ama sormaya ihtiyacım var. 'Açısal' kütüphanesini de dahil ettiniz mi? – WooCaSh

Evet, yaptım. Bu yüzden diğer tüm şeyler hala işe yarıyor. Sorgulanabilir hale getirmek için, sadece 'index.html' – Watt

Tamam bazı bu hazırlarken ama şimdi işe yarıyor sıkıntıları bulundu

gerekli olduğunu angularjs sürümü var slider-template.html dosya
ihtiyaç ve ister 1.1.4 or higher
@ Pascal, uiSlider:
'u eklemeniz gerektiğini söyledi.
Sizin için aşağıda çalışan bir demo hazırladım. Ben bunu

DEMO

kaynak

2013-06-14 17:14:19 WooCaSh

+1. Kod için teşekkürler. Neyi özlediğimi görmek için test edeceğim. – Watt

Şimdi ekranda gözüküyor. Floor = "0.0" ceiling = "1.0" 'ayarlandığında kaymıyor. Ben buna bakıyorum. Bu konuda yorum yapabilirseniz çok yardımcı olur. – Watt

@Watt 0 ile 1 arasında bir değer mi istiyorsunuz? – WooCaSh

Son zamanlarda angularjs içinde menzilli kaymak kullandık yardımcı olacağını umuyoruz. Fantezi kaydırıcıyı veya kaydırıcıyı kullanmak istiyorsanız. Aşağıdan alacaksın.

AngularJS slider directive with no external dependencies

Basit kaymak gibi sürgü birçok türü vardır
Menzil kaydırıcı özel stili dinamik seçim çubuğu rengi özel zemin
Slider ile
Slider ile
Sürgü/tavan/adım
Kaydırıcı ile keneler

Kullanımı kolay, mobil uyumlu ve özelleştirilebilir.

jQuery'yi kullanarak basit kaydırıcı kullandım. Kod aşağıda verilmiştir. Benim için iyi çalışma komut etiketinde komut Üstü

<!-- 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 -->

yılında

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

Ekleme Aşağıdaki kod senin için de çalışması gerekir.

kaynak

2017-11-15 10:49:30

cevap

İlgili konular