1

我有 2 个选择，我需要选择一个年份范围。第二个选择的年份必须大于或等于第一个。因此，如果我在第一个选择中选择一年，第二个选择应该改变并只显示大于或等于第一个选择中选择的年份的年份。

这就是我现在所拥有的：

<div ng-app="">
    <div ng-controller="appCtrl">
        <select  id="id_year_1">
            <option ng-repeat="year in years1 | filter:dateRangeFilter1" value="{{year}}">{{year}}</option>
        </select>
        <select  id="id_year_2">
            <option ng-repeat="year in years2 | filter:dateRangeFilter2" value="{{year}}">{{year}}</option>
        </select>    
    </div>
</div>


angular.module('app', ['ngResource'])

function appCtrl($scope) {
    var years = [2010, 2011, 2012];
    $scope.years1 = years;
    $scope.years2 = years;
    $scope.year1 = years[0];
    $scope.year2 = years[years.length - 1];

    $scope.$watch('years1', function(value, oldValue) {
        $scope.dateRangeFilter2 = function (value) {
            return value >= $scope.year2;
        };
    });
    $scope.$watch('years2', function(value, oldValue) {
        $scope.dateRangeFilter1 = function (value) {
            return value <= $scope.year1;
        };
    });
}

我在这个小提琴中也有它：http: //jsfiddle.net/d3sb4hky/

谢谢。

4

2 回答 2

1

我从（ jsfiddle ）开始削减了你的一些代码。我敢肯定它在使用方面并不完美，但这是您所要求的。也许您可以ng-change在第一次选择时使用 a 来更新secondSelect？（$watch被高估了！）

<div ng-app="">
<div ng-controller="appCtrl">
    <select ng-model="firstSelect" >
        <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
    </select>
    <select ng-model="secondSelect">
        <option ng-if="year >= firstSelect" ng-repeat="year in years" value="{{year}}">
            {{year}}
        </option>
    </select>    
</div>
</div>

// Script
angular.module('app', ['ngResource'])
function appCtrl($scope) {
    $scope.years = [2010, 2011, 2012];
}
于 2015-02-20T11:04:45.630 回答
0

如果您有多年的阵列，那么您不需要为此编写手动手表。您可以直接使用自定义过滤器，如下所示：

function appCtrl($scope) {
    var years = [2010, 2011, 2012];
    $scope.years1 = years;
    $scope.years2 = years;

    $scope.yr1Val = years[0];

    $scope.yearFilter = function(yr) {
        if(yr>$scope.yr1Val)
            return true;
        return false;
    }
}

查看更新的小提琴

于 2015-02-20T11:10:44.637 回答