AngularJS 滑块范围值没有显示在上面？

Question

我正在尝试从 Google 搜索中实现 AngularJS 滑块，我可以根据我的滑块选择将其过滤掉，但我无法显示它的最小和最大范围滑块开始和结束的值（在顶部或滑块的 starting/ending 位置）。

喜欢样品：

如果我给出：<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> 那么我的过滤就不会基于我的滑块 moving/selection，我希望这次它也应该显示范围值（在开始和结束的地方滑块，但它没有发生？，我们在这里添加：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);
  };
});

请告诉我哪里做错了什么？提前致谢。

Answer 1

通过使用 "ng-model" 参数，您将覆盖前两个模型参数。

对于范围的选择，您只需要 "ng-model-low" 和 "ng-model-high" 参数。

如果您想在滑块上方显示当前选定的值，则需要一些自定义 CSS (possibly similar to this)

对于 "quick and easy" 解，use something like angularjs-slider.

AngularJS 滑块范围值没有显示在上面？

AngularJS slider range value is not displaying on it?

javascript

slider

angularjs