AngularJSスライダの範囲値が表示されていませんか？

Google検索でAngularJSスライダーバーを実装しようとしていますが、スライダーの選択に基づいてフィルタリングすることはできますが、スライダーバーの開始時と終了時に最小値と最大値を表示できませんスライダーバーの上部または開始/終了位置）に移動します。サンプルのようにAngularJSスライダの範囲値が表示されていませんか？

：私は次のように与えた場合

：<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>、その後、私のスライダーが細かいフィルタリングされる（もちろん、それはスライダバーの上に任意の範囲の値を表示されません）

しかし、私のように与える場合：<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider>私のスライダの移動/選択に基づいて動作していない私のフィルタリングは、私はまた、（スライダバーの開始と終了の場所で、範囲の値を表示する必要がありますこの時間を願っていますが、それは起こっていない？追加している：ng-model="itemrange.maxvalue"）

Fiddleが利用可能です。

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); 
    }; 
});

私はどこで私が間違って何をやって教えてください？前もって感謝します。

出典

2016-07-04 Dhana

"ng-model"パラメータを使用すると、前の2つのモデルパラメータが上書きされます。

範囲を選択するには、「ng-model-low」および「ng-model-high」パラメータのみが必要です。あなたはスライダー上で現在選択されている値を表示したい場合は

、それがその後、どのように私ができる、お返事を、「迅速かつ簡単な」解決策についてuse something like angularjs-slider.

出典

2016-07-04 10:42:05 MetaPyroxia

おかげでいくつかのカスタムCSS (possibly similar to this)

が必要になります最小値/最大値をスライダーの上に表示しますか？どうか私は分かりますか？ – Dhana

これを私の答えに編集しました。カスタムHTMLとCSSを使用してスライダのスタイルを設定して、その値を表示する必要があります。私の知る限り、デフォルトのスタイルの一部を形成しません。私が提供した例は、最初のGoogleの結果リンクであり、JQueryを使用していますが、必要なことに関する一般的な考え方を与える必要があります。 – MetaPyroxia

スライダーの上に選択した値を表示したくない場合は、スライダーの上に低い値と高い値を表示するだけです。http://plnkr.co/edit/jOk6GmUdzOu99xJqQ0wU?p=preview – Dhana

AngularJSスライダの範囲値が表示されていませんか？

答えて

関連する問題