如何将daterange picker (AngularJS自定义指令)链接到AngularUI-Select2行为?

I'm using

我使用

Angular UI - Select2 directive to show an option box.
角UI -选择2指令显示选项框。
Bootstrap Date-Range Picker to show a date picker
引导日期范围选择器以显示日期选择器

Both of them are working fine individually.

他们两个都工作得很好。

Working of the Date picker

日期选择器的工作

Whenever the date range is changed, new data is fetched through AngularJS. This is the code:

只要更改了日期范围，就通过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>

Angular script

角脚本

//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();
}

This is working fine. I'm getting customers list for the selected range (fetched through $resource everytime the range is changed)

这是工作正常。我正在为所选范围获取客户列表(每次范围改变时通过$resource获取)

Working of the Select2 AngularUI

选择2 AngularUI的工作

<select ui-select2 ng-model="selectedCity" >        
    <option value="1">City1</option>
    <option value="2">City2</option>    
    <option value="3">City3</option>        
</select>

This is also working fine.

这也是有效的。

The requirement is that whenever an option is selected (e.g. 2nd option, City2) I want to get customers list for the selected range for City2. And while City2 is selected, user can change the date range too and get a new list of customers value.

要求是，无论何时选择了一个选项(例如，第二个选项，City2)，我都希望获得City2所选范围的客户列表。当选择City2时，用户也可以更改日期范围并获得新的客户价值列表。

So I'm stuck as to how to interlink Datetime picker and this select options? Kindly guide me.

所以我被如何连接Datetime picker和这个select选项困住了?请指引我。

I'm stuck. :(

我卡住了。:(

1 个解决方案

#1

Add inside controller.

添加内部控制器。

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

this function will be executed when the selectedCity changes and you can get customers. You also need to store the selected start and end dates in the $scope object (within $scope.changeDate).

当selectedCity发生更改并您可以获得客户时，将执行此功能。您还需要在$scope对象(在$scope. changedate中)中存储所选的开始和结束日期。

#1