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];

});

Answer 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.