用于筛选角度的滑动条值

Slidebar value to filter Angular

本文关键字：筛选 用于      更新时间：2023-09-26

我目前正在做我的第一个AngularJS项目，所以我根本没有Angular的经验。在我的 html 中，我展示了一个带有两个手柄的滑动条。这样我就可以得到最小值和最大值。这发生在这里：

  <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>

我的控制器中有一小组数据：

 $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}
];

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

您可以使用

Angular filters来实现这一点。过滤器可以是string、Object或function()

解决方案是在呈现列表时包含筛选器。

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

然后在控制器中，您可以包含一个过滤器函数（在本例中为 filterByWidth ）。

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

你可以做这样的事情

     <div ng-repeat="product in products">
       <div ng-if="product.width > minWidth && product.width < maxWidth ">  {{product.partNumber}}</div>
     </div>
相关文章：