Frage Wie implementiert man den jQuery-Bereichsschieberegler in AngularJS?


Ich versuche zu benutzen Anuglar-Schieberegler in meiner bestehenden AngularJS App.

Ich folgte den Kommentaren des Autors Hier

Ich habe heruntergeladen unter Dateien (in Head-Tag) von Github des Autors und in meinem hinzugefügt index.html

HTML Quelltext:

<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 (Winkelcode). Ich habe die zweite Zeile gemäß den Anweisungen des Autors hinzugefügt, ich vermute, dass ich dort etwas falsch gemacht habe

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

Ich sehe kein Renderer-Rendering im Browser. Die ältere Angular-spezifische Funktionalität in der App funktioniert jedoch weiterhin und es gibt keinen Fehler in der Browser-Konsole.

Wenn Sie das obige Problem nicht finden können, können Sie uns eine andere Möglichkeit zur Implementierung vorschlagen Bereich Schieberegler in der AngularJS App.

Ich bin ziemlich neu in AngularJS

Lassen Sie mich wissen, wenn Sie möchten, dass ich hier auch den Bibliotheksdatei-Code des Autors posten kann.


10
2018-06-14 16:30


Ursprung


Antworten:


Ok, ich habe einige Probleme bei der Vorbereitung gefunden, aber jetzt funktioniert es:

Probleme gegründet:

  • es ist angularjs Version erforderlich 1.1.4 or higher
  • du musst haben slider-template.html Datei
  • und wie @ Pascal sagte, Sie müssen hinzufügen uiSlider:

    var app = angular.module('myApp', ['uiSlider'])
    
  • Ich habe unten eine Demo für Sie vorbereitet. ich hoffe es hilft dir

DEMO


9
2018-06-14 17:14



Kürzlich habe ich RANGE SLIDER in angularJS verwendet. Wenn Sie eine schicke Slider- oder Slider-Anweisung verwenden möchten. Du wirst es von unten bekommen.

AngularJS Slider Direktive ohne externe Abhängigkeiten Es gibt viele Arten von Schiebern wie

  • Einfacher Slider
  • Bereichsschieberegler
  • Schieberegler mit benutzerdefinierten Stil
  • Schieberegler mit dynamischer Auswahlbalkenfarbe
  • Slider mit benutzerdefinierten Boden / Ceil / Schritt
  • Schieber mit Zecken

Es ist sehr einfach zu bedienen, mobil freundlich und anpassbar.

Ich habe einen einfachen Schieberegler mit jQuery verwendet. Der Code ist unten angegeben.

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

Fügen Sie folgenden Code in das Skript-Tag ein

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

Das obige Skript funktioniert gut für mich und sollte auch für dich funktionieren.


0
2017-11-15 10:49