Question

所以我有一个＆＃34;价格＆＃34;我的网站上的字段使用JQuery-UI滑块。该字段由2个整数值组成：minPrice和maxPrice。

假设我有一个如下所示的对象数组：

objarr=[
 {
  'name'='item1',
  'price'=100
 },
 {
  'name'='item2',
  'price'=200
 },...
]

以及以下带有ng-repeat的div：

<div ng-repeat="obj in objarr">
  {{obj.name}}: ${{obj.price}}
</div>

如何创建一个过滤器，以便只使用obj [＆＃39; price＆＃39;]＆gt; minPrice和obj [＆＃39;价格＆＃39;]＆lt; maxPrice会显示？

Answer 1

您可以在控制器中编写一个简单的辅助函数：

$scope.filterRange = function(obj) {
    return obj.price > $scope.range.minPrice && obj.price <= $scope.range.maxPrice;
};

并在HTML中使用它：

<div ng-repeat="obj in objarr | filter:filterRange">
    {{obj.name}}: ${{obj.price}}
</div>

演示：http://plnkr.co/edit/uoynjdSI1ajrm02qp3v8?p=preview

Answer 2

另一种方法是编写一个Angular过滤器

app.filter('pricebetween', function(){
  return function(items, min, max) {
      var filtered = [];
      angular.forEach(items, function(item, key) {
          if(item.price <= max && item.price >= min) { 
              filtered.push(item);
          }
      });
      return filtered;
  };
});

然后在代码中

<div ng-repeat="obj in list | pricebetween:300:500">

在plnkr示例中，我还有大于过滤器。

http://plnkr.co/edit/f0hJpwK4TrwdgJvPRZRo

Answer 3

你可以使用ng-show过滤器:)，它非常容易并且适合你的问题，就像这样使用它，跨度＆GT; {{obj.name}}：$ {{obj.price}} span＆gt; ng-show的文档：https://docs.angularjs.org/api/ng/directive/ngShow

祝福：）

AngularJS过滤器与整数比较

3 个答案:

演示：http://plnkr.co/edit/uoynjdSI1ajrm02qp3v8?p=preview