2

私は使用しています

  1. Angular UI -オプション ボックスを表示する Select2 ディレクティブ。
  2. 日付ピッカーを表示するBootstrap Date-Range Picker

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>

Angular スクリプト

//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>

これも問題なく動作しています。

要件は、オプションが選択されるたびに (たとえば、2 番目のオプション、City2)、City2customersの選択範囲のリストを取得することです。また、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 に答える