Question

我有两个数组，一个包含最小价格，另一个包含最大价格，如果用户从最低价格下拉菜单中选择一个说“8000”的最低价格，我只想显示最大价格下拉列表中的值大于“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＆amp; $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中的所有值，这些值大于最小值范围内所选选项的值。

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

1 个答案: