Como implementar a barra de alcance jQuery em AngularJS
estou a tentar usar anuglar-slider na minha aplicação AngularJS existente.
Eu segui os comentários do autor.eu baixei abaixo dos ficheiros (na etiqueta principal) do github do autor e adicionei na minha index.html
código 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 (Código Angular) . Eu adicionei a segunda linha de acordo com as instruções do autor, eu suspeito que eu fiz algo errado lá
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
não vejo nenhuma representação deslizante no browser. No entanto, a funcionalidade Angular específica mais antiga do aplicativo ainda funciona e não há erro no console do navegador.
Se não conseguir encontrar o problema acima, esteja à vontade para sugerir qualquer outra forma de implementar a barra do intervalo na aplicação AngularJS.
Sou novo em AngularJS. Avisa-me se quiseres que publique o código de arquivo da Biblioteca do autor aqui também.2 answers
- é necessária a versão angularjs
1.1.4 or higher - tens de ter
slider-template.htmlficheiro -
E como @Pascal disse, você precisa incluir
uiSlider:var app = angular.module('myApp', ['uiSlider'])
Preparei-te uma demo. Espero que te ajude.
Recentemente usei uma barra deslizante em angularj. Se você quiser usar a diretriz de slider chique ou slider. Você vai obtê-lo a partir de baixo.
Directiva da barra de AngularJS sem dependências externas existem muitos tipos de sliders como
- barra simples
- controle deslizante
- barra deslizante com estilo personalizado
- barra deslizante com cor dinâmica da barra de selecção
- barra deslizante com piso personalizado/ceil / step
- barra deslizante com carraças
É muito fácil de usar, móvel amigável e personalizável.
Usei um slider simples usando jQuery. O código é dado abaixo.
<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>
Adicionar o seguinte código na etiqueta
<!-- 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 -->
Acima do guião a funcionar bem para mim, deve funcionar para ti também.