AngularJS Slider Bereich Wert wird nicht angezeigt?

Ich versuche AngularJS Slider Bar von Google-Suche zu implementieren, ich kann Ballen, um es basierend auf meiner Slider-Auswahl zu filtern, aber ich bin nicht in der Lage, den minimalen und maximalen Bereich Werte am Anfang und Ende des Schiebereglers anzuzeigen (oben oder am Anfang/Ende des Schiebereglers).AngularJS Slider Bereich Wert wird nicht angezeigt?

Wie Beispiel:

Wenn ich geben wie: <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>, dann ist mein Schieber Feinfilterung (natürlich wird es keine Bereichswerte auf der Schiebeleiste zeigen)

Aber wenn ich gebe: <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider> dann funktioniert meine Filterung nicht basierend auf meinem Slider Verschieben/Auswahl, ich hoffe dieses Mal sollte es auch zeigen die Bereichswerte (am Anfang und am Ende der Schieberegler, aber es ist nicht passiert?, Hier wir hinzufügen: ng-model="itemrange.maxvalue")

Fiddle ist verfügbar.

html:

<body ng-controller='PriceCtrl'> 
    <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider> 
    lower_price_bound: <strong>{{lower_price_bound}}</strong> 
    &nbsp; 
    upper_price_bound: <strong>{{upper_price_bound}}</strong> 
    <hr> 
    <table border="1"> 
     <thead> 
     <th>Name</th> 
     <th>Min Price</th> 
     <th>Max Price</th> 
     </thead> 
     <tbody> 
     <tr ng-repeat='item in items|filter:priceRange'> 
      <td>{{item.name}}</td> 
      <td>{{item['min-acceptable-price']}}</td> 
      <td>{{item['max-acceptable-price']}}</td> 
     </tr> 
     </tbody> 
    </table> 

    </body>

app.js:

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

app.controller('PriceCtrl', function ($scope){ 

    $scope.itemrange = { 
    maxvalue: 50 
    }; 

    $scope.items = [{name: "item 1", "min-acceptable-price": "10", 
        "max-acceptable-price": "50"}, 
        {name: "item 2", "min-acceptable-price": "5", 
        "max-acceptable-price": "40"}, 
        {name: "item 3", "min-acceptable-price": "15", 
        "max-acceptable-price": "30"}]; 

    $scope.lower_price_bound = 0; 
    $scope.upper_price_bound = 50; 

    $scope.priceRange = function(item) { 
    return (parseInt(item['min-acceptable-price']) >= $scope.lower_price_bound && parseInt(item['max-acceptable-price']) <= $scope.upper_price_bound); 
    }; 
});

Bitte lassen Sie mich wissen, wo und was ich falsch mache? Danke im Voraus.

Quelle

2016-07-04 Dhana

Mit dem Parameter "ng-model" überschreiben Sie die vorherigen beiden Modellparameter.

Zur Auswahl eines Bereichs benötigen Sie nur die Parameter "ng-model-low" und "ng-model-high".

Wenn Sie die aktuell ausgewählte Werte oberhalb der Regler angezeigt werden soll, das wird einige benutzerdefinierte CSS benötigen (possibly similar to this)

Für eine „schnelle und einfache“ Lösung, use something like angularjs-slider.

Quelle

2016-07-04 10:42:05 MetaPyroxia

Dank für Ihre Antwort, wie kann ich dann zeige diese minimalen/maximalen Werte auf meinem Schieberegler? Könnte ich bitte wissen? – Dhana

Ich habe das gerade in meine Antwort geändert. Sie müssen einige benutzerdefinierte HTML- und CSS-Stile verwenden, um Ihre Schieberegler so zu formatieren, dass sie diese Werte anzeigen. Dies ist meines Wissens nach nicht Teil des Standardstils. Das Beispiel, das ich zur Verfügung gestellt habe, ist nur ein erster-Google-Ergebnis-Link, und verwendet JQuery, aber es sollte Ihnen die allgemeine Vorstellung von dem, was Sie tun müssen. – MetaPyroxia

Ich möchte keine ausgewählten Werte über dem Schieberegler anzeigen, ich muss nur meine niedrigen und hohen Werte über Schieberegler anzeigen, wie: http://plnkr.co/edit/jOk6GmUdzOu99xJqQ0wU?p=preview – Dhana

AngularJS Slider Bereich Wert wird nicht angezeigt?

Antwort

Verwandte Themen