Filter Array based on the selection of another array

Question

I have two arrays, one contains the Min-Prices and the other contains the Max-Prices, and if the user chooses a min-price of say "8000" from the Min-price dropdown, I want to show only the values that is greater than "8000" in the Max-Price dropdown.

How can I approach that with Angular.js?

Here's a JSFiddle ... http://jsfiddle.net/sheko_elanteko/fxkSz/10/

<div ng-app="app">
<div ng-controller="MainController">
    <form action="#">
        <label>Min Price</label>
        <select name="min-price">
            <option ng-repeat="num in minPrice" value="{{ num }}">{{ num }}</option>
        </select>

        <br>

        <label>Max Price</label>
        <select name="max-price">
            <option ng-repeat="num in maxPrice" value="{{ num }}">{{ num }}</option>
        </select>
    </form>
</div>

and the js ...

var app = angular.module('app', []);

app.controller('MainController', function($scope){

$scope.minPrice = [200, 400, 600, 800, 1000];
$scope.maxPrice = [200, 400, 600, 800, 1000];

});

I would start by creating some test data and test code on jsFiddle so that you can play around and have something to reference when you have a specific question. — Xotic750
– Xotic750, Commented May 12, 2014 at 11:45
I just started learning Angular, and I can't seem to get my head around it just yet. So, I have no idea how to approach this issue. — Ruby
– Ruby, Commented May 12, 2014 at 11:47
Ok, but you can create test data and HTML dropdowns and any required CSS, you know that right? And add the angular library and make an attempt, all on jsFiddle. — Xotic750
– Xotic750, Commented May 12, 2014 at 11:49

Idkt · Accepted Answer · 2014-05-12 12:39:06Z

1

I made this fiddle that solves your problem. Its a pretty simple use of ngRepeat & $scope, and that is all.

Adding the code, as suggested

The JS part is;

var app = angular.module('App', [])

.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.mins = [100, 200, 300, 400];
    $scope.maxs = [200, 300, 400, 500];

    $scope.getMxRange = function () {
        var arr = [];
        if ($scope.minVal) {
            angular.forEach($scope.maxs, function (maxVal) {
                if ($scope.minVal < maxVal) {
                    this.push(maxVal);
                }
            }, arr);
        }
        else {
            arr = $scope.maxs;
        }
        return arr;
    };
}]);

And ofcourse, the HTML looks something like;

<div ng-app="App" ng-controller="MainCtrl">
    <select ng-model="minVal">
        <option ng-repeat="min in mins" value="{{min}}">{{min}}</option>
    </select>
    <select>
        <option ng-repeat="max in getMxRange()" value="{{max}}">{{max}}</option>
    </select>
</div>

I believe the code is pretty self explanatory. The ngModel minVal contains the selected minimum value. and the getMxRange method returns all values in maxs which are greater than the value of the selected option in the range of minimum values.

edited May 12, 2014 at 12:39

answered May 12, 2014 at 12:13

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

1 Comment

Xotic750 Over a year ago

Please don't rely on links. Post the code in your answer, along with explanations as to how it works.

Collectives™ on Stack Overflow

Filter Array based on the selection of another array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related