Question

我正在尝试从Google搜索中实现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);
  };
});

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

Answer 1

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

为了选择范围，您只需要“ng-model-low”和“ng-model-high”参数。

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

对于“快速简便”的解决方案，use something like angularjs-slider.

AngularJS滑块范围值是否显示在上面？

1 个答案: