滑動條值過濾Angular

Question

我目前正在研究我的第一個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} 
]; 

正如你們所看到的每一件產品的寬度。我只想要顯示那些寬度在滑動條上選定的最小值和最大值之間的產品。有什麼建議麼？

Answer 1

您可以使用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; 
    } 
} 

Answer 2

你可以做這樣的事情

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