我正在使用
- Angular UI - Select2 指令以显示选项框。
- 引导日期范围选择器以显示日期选择器
他们两个单独工作都很好。
日期选择器的工作
每当更改日期范围时,都会通过 AngularJS 获取新数据。这是代码:
HTML
<div ng-app="my-app" ng-controller="MyController">
<div id="reportrange" class="reportrange"
my-date-picker="changeDate($startDate, $endDate)">
<span></span>
</div>
</div>
角脚本
//directive code
var mod = angular.module('my-app', ['ngResource', 'ui']);
mod.directive('myDatePicker', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
$(element).daterangepicker({
//options now shown for brevity
}, function (startDate, endDate) {
$('#reportrange span').html(startDate.toString('MMMM d, yyyy') + ' - ' + endDate.toString('MMMM d, yyyy'));
var fStartDate = moment(startDate).format('YYYY-MM-DD');
var fEndDate = moment(endDate).add('days', 1).format('YYYY-MM-DD');
scope.$eval(attr.myDatePicker, {$startDate: fStartDate, $endDate: fEndDate});
});
var inEndDate = Date.today();
var inStartDate = Date.today().add({ days: -29 });
//Set the initial state of the picker label
$('#reportrange span').html(inStartDate.toString('MMMM d, yyyy') + ' - ' + inEndDate.toString('MMMM d, yyyy'));
}
};
});
//Controller code
function MyController($scope, $resource, $timeout) {
var inEndDate = moment(Date.today()).format('YYYY-MM-DD');
var inStartDate = moment(Date.today().add({ days: -29 })).format('YYYY-MM-DD');
var User = $resource('/fetch?from=:from&to=:to', {from: inStartDate, to: inEndDate}, {
getAll: {method: 'GET', isArray: true}
});
$scope.changeDate = function(fromDate, toDate) {
$scope.customers = User.getAll({from: fromDate, to: toDate});
};
$scope.customers = User.getAll();
}
这工作正常。我正在获取customers
所选范围的列表(每次更改范围时通过 $resource 获取)
Select2 AngularUI 的工作
<select ui-select2 ng-model="selectedCity" >
<option value="1">City1</option>
<option value="2">City2</option>
<option value="3">City3</option>
</select>
这也工作正常。
The requirement is that whenever an option is selected (eg 2nd option, City2) I want to get customers
list for the selected range for City2. 在选择 City2 时,用户也可以更改日期范围并获取新的customers
值列表。
所以我不知道如何将日期时间选择器和这个选择选项联系起来?请指导我。
我被困住了。:(