Combining rangeSlider with search filter in AngularJS

Question

I'm using this rangeSlider and a search filter for a table list with items of a WebAPI. My problem is, that the search filter isn't synchronized with the rangeslider in my search form. To imagine it better I show you the currently code snippet:

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

I think the ngModel in the rangeSlider Directive doesn't grab the value search.age. In the attribute model-max I've added also search.age. When I'm looking for max number 8 in my search form then it is displaying persons with the ages 8,18,38 and so on. But the result have to be 0-8. How can I solve this? I also have tried to define a function in the attribute on-handle-up but I don't know how to grab the item in filter: search.

seanhodges · Accepted Answer · 2015-05-29 12:05:55Z

1

I think the problem is your use of filter. This is text-based so your results are being filtered by results containing the character "8" in their age.

Instead, create a custom filter that does what you want. The filter below will limit the results between a range of ages:

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

You could then use the search.age value as a max argument, and 0 for the min argument to return all results between zero and the age slider value:

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

By modifying your range slider you could use both min and max range values from the slider. As per your comments below, the "$scope.search" object cannot hold the range values as they will then be picked up by filter as well, I've used a separate scope variable called "$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">

My example is hardcoded to work with ages, so if you want to search by multiple ranges you'll have to adapt it.

Here is an example: http://jsfiddle.net/g0woejpf/2/

I couldn't get that angular-slider to play nicely with jsfiddle so I shamelessly ripped one off from somewhere else to demonstrate how it all works, the same principle should apply though.

edited May 29, 2015 at 12:05

answered May 29, 2015 at 10:03

seanhodges

17.6k17 gold badges74 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

yuro Over a year ago

It's a good solution but the filter need to define also the other search input fields who have strings.

seanhodges Over a year ago

That should be easy enough, just chain the filters... person in personslist | range:search.min_age:search.max_age | filter:search - just make sure you don't assign "search.age" as that will trigger a text search on the age field again!

yuro Over a year ago

I've tried this definition but it gives me non items. Only the rangeSlider works.

seanhodges Over a year ago

I put together an example. It seems the search.min_age / search.max_age values were confusing filter, so you'll need to house those properties somewhere else to make this work.

yuro Over a year ago

ok..Now it works :) .. I have still one question. When I click on other inputfield then the other 2 disabled and the input what you've written is removed. That works but the rangeSlider still remains by the same value. I want it if the rangeSlider disabled that the value is on 100 again. How can I fixed that?

|

Collectives™ on Stack Overflow

Combining rangeSlider with search filter in AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related