javascript - 用于过滤 Angular 滑动条值

Question

我目前正在开发我的第一个 AngularJS 项目，所以我根本没有 Angular 经验。在我的 html 中，我显示了一个带有两个 handle 的滑动条。这样我可以获得最小值和最大值。这发生在这里:

  <div data-role="rangeslider">
    <label for="width-min">Width</label>
    <input type="range" name="width-min" id="width-min" value="5" ng-value="5"  min="3" max="53.5" ng-model="minWidth">
    <label for="width-max">Width</label>
    <input type="range" name="width-max" id="widthe-max" value="35" ng-value ="53"  min="3" max="53.5" ng-model="maxWidth">
  </div>

我的 Controller 中有一小部分数据:

 $scope.products = [
{partNumber: "5400-003-412", specific:"V",width:5.5,MT:0.25,CT:0.33,L:18},
{partNumber: "5400-003-410", specific:"DC",width:5.5,MT:0.25,CT:0.33,L:11.5},
{partNumber: "5400-003-102s3", specific:"V",width:19.5,MT:0.38,CT:0.61,L:25.4}
];

正如你们所看到的，每个产品都有宽度。我只想显示那些宽度介于 slider 上所选的最小值和最大值之间的产品。有什么建议么？

Answer 1

您可以使用 Angular filters为了那个原因。过滤器可以是字符串、对象或function()

解决方案是在呈现列表时包含过滤器。

<ul>
  <li ng-repeat="product in products | filter : filterByWidth"
    {{product.partNumber}} - {{product.width}}
  </li>
</ul>

然后在您的 Controller 中，您可以包含一个过滤器函数(在本例中为 filterByWidth)。

$scope.filterByWidth = function(product, index, array) {
  if (product.width > $scope.minWidth &&
    product.width < $scope.maxWidth) {
    return true;
  } 
}