javascript - 在 AngularJS 中将 rangeSlider 与搜索过滤器结合起来

Question

我正在使用这个rangeSlider以及包含 WebAPI 项目的表格列表的搜索过滤器。我的问题是，搜索过滤器与搜索表单中的范围 slider 不同步。为了更好地想象，我向您展示当前的代码片段:

//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
};

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

Answer 1

我认为问题在于您使用过滤器。这是基于文本的，因此您的结果将按年龄中包含字符“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 值作为 max 参数，使用 0 作为 min 参数，以返回零到年龄 slider 值之间的所有结果:

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

通过修改范围 slider ，您可以使用 slider 中的最小和最大范围值。根据下面的评论，“$scope.search”对象无法保存范围值，因为它们也会被 filter 拾取，我使用了一个名为“$scope”的单独范围变量.范围”:

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

我无法让 Angular slider 与 jsfiddle 很好地配合，所以我无耻地 ripped one off从其他地方来演示它是如何工作的，但应该应用相同的原则。