Come implementare il cursore dell'intervallo jQuery in AngularJS

Sto tentando di utilizzare anuglar-slider nella mia app AngularJS esistente.Come implementare il cursore dell'intervallo jQuery in AngularJS

ho seguito i commenti dell'autore here

ho scaricato qui di seguito i file (nel tag head) da github dell'autore e ha aggiunto nel mio index.html

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

App. js (codice angolare). Ho aggiunto seconda linea secondo le istruzioni d'autore, ho il sospetto che ho fatto fare qualcosa di sbagliato c'è

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

non vedo alcuna resa cursore in del browser. Tuttavia, la funzionalità specifica Angular precedente nell'app funziona ancora e non vi sono errori nella console del browser.

Se non riesci a trovare il problema sopra, sentiti libero di suggerire qualsiasi altro modo per implementare il cursore intervallo nell'app AngularJS.

io sono abbastanza nuovo per AngularJS

Fatemi sapere se mi volete inviare il codice file di libreria dell'autore qui.

fonte

2013-06-14 Watt

Eventuali errori nella pagina? – WooCaSh

Domanda stupida, ma è necessario chiedere. Hai incluso anche la libreria 'angular'? – WooCaSh

Sì, l'ho fatto. Questo è il motivo per cui tutte le altre cose funzionano ancora. Per rendere la domanda leggibile, ho appena postato il mio 'index.html' – Watt

Ok ho trovato qualche problema quando si preparano questo, ma ora si sta lavorando:

problemi di fondazione:

è richiesto versione angularjs 1.1.4 or higher
hai bisogno di avere slider-template.html file di
e come @ Pascal ha detto che è necessario includere uiSlider:
```
var app = angular.module('myApp', ['uiSlider']) 
```
Ho preparato per voi una demo funzionante di seguito. Spero che vi aiuterà a

DEMO

fonte

2013-06-14 17:14:19 WooCaSh

+1. Grazie per il codice. Farò dei test per vedere cosa mi è mancato. – Watt

Si presenta sullo schermo ora. Semplicemente non scorre quando imposto 'floor =" 0.0 "ceiling =" 1.0 "'. Ci sto guardando. Sarebbe di grande aiuto se potessi commentare su questo. – Watt

@Watt vuoi range da 0 a 1 giusto? – WooCaSh

Recentemente ho usato GAMMA SLIDER in angularJS. Se si desidera utilizzare la regolazione di cursore o cursore di fantasia. Lo otterrai dal basso.

AngularJS slider directive with no external dependencies Ci sono molti tipi di cursori come

semplice cursore
cursore Intervallo
Slider con stile personalizzato
cursore con la selezione dinamica barra di colore
Slider con piano personalizzato/ceil/step
Cursore con tick

È molto facile da usare, mobile friendly e personalizzabile.

Ho usato il dispositivo di scorrimento semplice con jQuery. Il codice è indicato di seguito.

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

Add seguente codice nel tag script

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

Sopra sceneggiatura lavorando bene per me, dovrebbe funzionare anche per te.

fonte

2017-11-15 10:49:30

Come implementare il cursore dell'intervallo jQuery in AngularJS

risposta

Problemi correlati