2

我正在使用

  1. Angular UI - Select2 指令以显示选项框。
  2. 引导日期范围选择器以显示日期选择器

他们两个单独工作都很好。

日期选择器的工作

每当更改日期范围时，都会通过 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 customerslist for the selected range for City2. 在选择 City2 时，用户也可以更改日期范围并获取新的customers值列表。

所以我不知道如何将日期时间选择器和这个选择选项联系起来？请指导我。

我被困住了。:(

4

1 回答 1

3

添加内部控制器。

$scope.$watch('selectedCity', function(newVal, oldVal){
  if(newVal){ 
   $scope.customers = User.getAll({from: fromDate, to: toDate, city: newVal});
 }
});

当 selectedCity 发生变化并且您可以获得客户时，将执行此功能。您还需要将选定的开始日期和结束日期存储在 $scope 对象中（在 内$scope.changeDate）。

于 2013-04-04T15:07:14.047 回答