AngularJS - 2 选择年份范围。第二个选项必须大于或等于第一个选择
AngularJS - 2 selects for a range of years. Options in second one have to be greater or equal than first one selected
我有 2 个 select 需要选择年份范围。第二个 select 的年份必须大于或等于第一个。因此,如果我在第一个 select 中 select 一年,第二个 select 应该更改并仅显示大于或等于第一个 select 的年份 select.
这是我现在拥有的:
<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;
};
});
}
这个fiddle我也有:http://jsfiddle.net/d3sb4hky/
谢谢。
我从 (jsfiddle) 开始删减了您的一些代码。我确定它在使用方面还不完美,但这是您所要求的。也许您可以在第一个 select 上使用 ng-change
来更新 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];
}
如果你有数年的时间,那么你就不需要在上面写手动表了。您可以直接使用自定义过滤器,如下所示:
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;
}
}
查看更新Fiddle
我有 2 个 select 需要选择年份范围。第二个 select 的年份必须大于或等于第一个。因此,如果我在第一个 select 中 select 一年,第二个 select 应该更改并仅显示大于或等于第一个 select 的年份 select.
这是我现在拥有的:
<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;
};
});
}
这个fiddle我也有:http://jsfiddle.net/d3sb4hky/
谢谢。
我从 (jsfiddle) 开始删减了您的一些代码。我确定它在使用方面还不完美,但这是您所要求的。也许您可以在第一个 select 上使用 ng-change
来更新 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];
}
如果你有数年的时间,那么你就不需要在上面写手动表了。您可以直接使用自定义过滤器,如下所示:
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;
}
}
查看更新Fiddle