在 AngularJS 数据绑定表中使用 jQuery UI 日历过滤日期范围

Question

我有一系列从 JSON 源中提取数据的 HTML 表。这些是标签。它们工作正常，可以在这里的小提琴中看到：

小提琴： http://jsfiddle.net/nA28B/1/.

我现在需要做的是使用日期范围输入（集成为 jQuery UI 日期选择器）按日期列过滤表中的数据。我是 AngularJS 的新手，与 jQuery UI 日期选择器的集成尤其让我不知所措，我正在努力寻找解决方案。

我尝试在日期输入中添加一个 ng-change 属性，但甚至无法让它触发一个简单的警报 - 可能我没有在正确的位置设置控制器（我尝试创建一个新的过滤器输入周围的控制器无济于事）？

这方面的代码很长，但很简单，如下：

HTML：

<div ng-app="myApp">
    <h2>Tabs:</h2>
    <div class="tabs" ng-init="selected=1">
        <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1" ng:class="{'active' : selected==1 }">Purchases</a>
        <a href="" title="" class="tab" rel="tab2" ng:click="selected=2" ng:class="{'active' : selected==2 }">Products on sale</a>
        <a href="" title="" class="tab" rel="tab3" ng:click="selected=3" ng:class="{'active' : selected==3 }">Last 30 days sales</a>
    </div>
    <h2>Filters:</h2>
    <div>
        <label for="fromDate">From date:</label> <input type="text" name="fromDate" value="from date..." ng-model="dateFrom" datepicker />
    </div>
    <div>
        <label for="toDate">To date:</label> <input type="text" name="toDate" value="to date..." ng-model="dateTo" datepicker />
    </div>
    <div class="selected" ng-controller="PurchasesCtrl" ng:show="selected == 1">
        <h3>Purchases:</h3>
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{purchase.date}}</td>
                <td>{{purchase.text}}</td>
            </tr>
        </table>
    </div>

    <div class="selected" ng-controller="SaleProductsCtrl" ng:show="selected == 2">
        <h3>Sale products:</h3>                         
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{saleProduct.date}}</td>
                <td>{{saleProduct.text}}</td>
            </tr>
        </table>
    </div>

    <div class="selected" ng-controller="Sale30DaysCtrl" ng:show="selected == 3">
        <h3>Sale 30 days:</h3>
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{sale30Day.date}}</td>
                <td>{{sale30Day.text}}</td>
            </tr>
        </table>
    </div>
</div>

JS：

var myApp = angular.module("myApp",[]);

myApp.factory("Purchases", function(){
    var Purchases = {};
    Purchases.data = [
        {
            date: "10/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "05/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return Purchases;
});

function PurchasesCtrl($scope, Purchases){
    $scope.purchases = Purchases;   
}




myApp.factory("SaleProducts", function(){
    var SaleProducts = {};
    SaleProducts.data = [
        {
            date: "10/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "28/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return SaleProducts;
});

function SaleProductsCtrl($scope, SaleProducts){
    $scope.saleProducts = SaleProducts;   
}




myApp.factory("Sale30Days", function(){
    var Sale30Days = {};
    Sale30Days.data = [
        {
            date: "06/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "08/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "21/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return Sale30Days;
});

function Sale30DaysCtrl($scope, Sale30Days){
    $scope.sale30Days = Sale30Days;   
}


myApp.directive('datepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            $(function () {
                element.datepicker({
                    dateFormat: 'dd/mm/yy',
                    onSelect: function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    }
});

请问谁能让我走上正确的轨道？我已经尝试了所有我能想到的方法，但我已经达到了我的 AngularJS 限制！

编辑：

我已经简化了示例，只是为了尝试使基本的日期过滤正常工作，这样我就可以在之后连接标签等。这是一个简化的小提琴：

简化的小提琴： http://jsfiddle.net/bY3YL/1/

Answer 1

嗯，你的问题很简单，你的输入在你的控制器之外，所以即使你使用了ng-change，它也永远不会被调用。

我修复了您的代码here。我还添加了过滤功能；它仅适用于 From Date 输入字段，但我认为您可能会自己计算 To Date 一个。

$scope.onChangeFromDate = function() {
    var fromDate = $.datepicker.parseDate('dd/mm/yy', $scope.dateFrom);
    angular.forEach($scope.purchases.data, function(purchase){
        var purchaseDate = $.datepicker.parseDate('dd/mm/yy', purchase.date);
        if(purchaseDate.getTime() < fromDate.getTime()) {
            purchase.filtered = true;
        }
    })
}