根据另一个数组的选择过滤数组

Question

我有两个数组，一个包含最低价格，另一个包含最高价格，如果用户从最低价格下拉列表中选择“8000”的最低价格，我只想显示Max-Price 下拉菜单中大于“8000”的值。

如何使用 Angular.js 来解决这个问题？

这是一个 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>

还有 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

我制作了 this fiddle 来解决您的问题。 ngRepeat & $scope 的使用非常简单，仅此而已。

按照建议添加代码

JS部分是；

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

当然，HTML 看起来像这样；

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

我相信代码很容易解释。 ngModel minVal 包含选定的最小值。而getMxRange 方法返回maxs 中大于最小值范围内所选选项的值的所有值。