Question

我正在使用此rangeSlider和搜索过滤器来查找包含WebAPI项目的表格列表。我的问题是，搜索过滤器与我的搜索表单中的rangelider不同步。想象一下，我向您展示了当前的代码片段：

//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 Directive中的ngModel没有获取值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作为min参数，以返回零和年龄滑块值之间的所有结果：

<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来证明它是如何工作的，同样的原则应该适用。

将rangeSlider与AngularJS中的搜索过滤器结合使用

1 个答案: