AngularJS滑塊範圍值沒有顯示在它上面？

我試圖從谷歌搜索實現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」參數，您將覆蓋前兩個模型參數。

對於選擇範圍，您只需要「ng-model-low」和「ng-model-high」參數。

如果你想顯示滑塊上方的當前選擇的值，這將需要一些自定義CSS (possibly similar to this)

對於「快速簡便」的解決方案，use something like angularjs-slider.

來源

2016-07-04 10:42:05 MetaPyroxia

感謝您的回覆，那又怎麼能在我的滑塊上顯示最小/最大值？我可以知道嗎？ – Dhana

剛剛編輯到我的答案。您需要使用一些自定義HTML和CSS來設置滑塊的樣式以顯示這些值 - 據我所知，它不構成默認樣式的一部分。我提供的例子只是第一個谷歌結果鏈接，並使用JQuery，但它應該給你一個你需要做什麼的一般概念。 – MetaPyroxia

我不想在滑塊上方顯示任何選定的值，我只需要在滑塊頂部顯示我的低和高值，如：http://plnkr.co/edit/jOk6GmUdzOu99xJqQ0wU?p=preview – Dhana

AngularJS滑塊範圍值沒有顯示在它上面？

回答

相關問題