Question

我正在使用

Angular UI - Select2 directive显示一个选项框。
Bootstrap Date-Range Picker显示日期选择器

他们两个都单独工作。

使用日期选择器

每当更改日期范围时，都会通过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();
}

这很好用。我得到所选范围的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>

这也很好。

要求是每当选择一个选项时（例如第二个选项，City2），我想获得City2所选范围的customers列表。选择City2时，用户也可以更改日期范围并获取customers值的新列表。

所以我不知道如何链接日期时间选择器和这个选择选项？请指导我。

我被困住了。：（

Answer 1

添加内部控制器。

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

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

如何将daterange picker（AngularJS自定义指令）与AngularUI-Select2行为相互链接？

1 个答案: