在AngularJS中将范围滑块与搜索过滤器结合使用

Question

我正在使用此rangeSlider和搜索过滤器来搜索包含WebAPI项目的表列表。我的问题是，搜索过滤器与我的搜索表单中的rangeslider不同步。想象它更好，我告诉你当前的代码片段：

//Person view: 
//rangeSlider 
<div class="form-group form-group-sm"> 
    <label class="col-sm-3 control-label">Age:</label> 
    <div class="col-sm-8"> 
    <div range-slider min="0" max="100" model-min="demo.min" model-max="search.age" pin-handle="min" show-values="true" ng-model="search.age"> 
    </div> 
    </div> 
</div> 
... 
//table list with items 
<tr ng-repeat="person in personslist | filter:search"> 
    <td>{{ person.id }}</td> 
    <td>{{ person.fname }}</td> 
    <td>{{ person.age }}</td> 
</tr> 
... 

//PersonCtrl 
$scope.demo = { 
    max: 100, 
    min: 0 
}; 

我认为ngModel在rangeSlider指令不抢值search.age。在属性model-max中，我也添加了search.age。当我在搜索表单中查找最多8位数字时，它将显示年龄为8,18,38岁的人员等等。但结果必须是0-8。我该如何解决这个问题？我也尝试在属性on-handle-up中定义一个函数，但我不知道如何抓取filter: search中的项目。

Answer 1

我认为问题在于你的使用filter。这是基于文本的，因此您的结果将被包含字符“8”的结果过滤。

取而代之的是，创建一个自定义的过滤器，做你想做的。下面的过滤器将限制年龄的范围之间的结果：

App.filter('range', function() { 
    return function(list, min, max) { 
     max = parseInt(max); 
     var result = []; 
     angular.forEach(list, function(input) { 
      if (input.age >= min && input.age <= max) result.push(input); 
     }); 
     return result; 
    }; 
}); 

然后，您可以使用search.age值作为最大的说法，并0为最小参数为零，年龄滑块值之间返回所有结果：

<tr ng-repeat="person in personslist | range:0:search.age"> 

通过修改您的范围滑块，您可以使用滑块的最小和最大范围值。根据下面的注释，“$ scope.search”对象不能保存范围值，因为它们也会被filter拾取，我使用了一个名为“$ scope.ranges”的单独范围变量：

<div range-slider model-min="ranges.min_age" model-max="ranges.max_age" ...></div> 

<tr ng-repeat="person in personslist | range:ranges.min_age:ranges.max_age | filter:search"> 

我的例子是硬编码的，适合年龄段的工作，所以如果你想通过多个范围搜索，你必须适应它。

下面是一个例子：http://jsfiddle.net/g0woejpf/2/

我不能得到那个角滑块与的jsfiddle发挥很好，所以我从别的地方无耻ripped one off展示它是如何工作，同样的原则应该适用，虽然。