在AngularJS数据绑定表中使用jQuery UI日历筛选日期范围
我有一系列从JSON源中提取数据的HTML表。这些是标签式的。它们工作得很好,可以在这里的小提琴上看到: 小提琴: 不过,我现在需要做的是使用日期范围输入(集成为jQueryUIDatePicker)按日期列过滤表中的数据。我是AngularJS的新手,尤其是与jQueryUIDatePickers的集成让我难以理解,我正在努力寻找解决方案 我曾尝试向日期输入添加ng change属性,但甚至无法触发简单警报-可能我没有在正确的位置设置控制器(我尝试在过滤器输入周围创建新控制器,但没有效果) 这方面的代码相当长,但非常直截了当,如下所示: HTML:在AngularJS数据绑定表中使用jQuery UI日历筛选日期范围,angularjs,filter,jquery-ui-datepicker,Angularjs,Filter,Jquery Ui Datepicker,我有一系列从JSON源中提取数据的HTML表。这些是标签式的。它们工作得很好,可以在这里的小提琴上看到: 小提琴: 不过,我现在需要做的是使用日期范围输入(集成为jQueryUIDatePicker)按日期列过滤表中的数据。我是AngularJS的新手,尤其是与jQueryUIDatePickers的集成让我难以理解,我正在努力寻找解决方案 我曾尝试向日期输入添加ng change属性,但甚至无法触发简单警报-可能我没有在正确的位置设置控制器(我尝试在过滤器输入周围创建新控制器,但没有效果) 这
<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>
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();
}
});
});
}
}
});
谁能用这个让我走上正轨?我已经尝试了我能想到的一切,但我已经达到了我的角度极限
编辑:
<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>
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();
}
});
});
}
}
});
我简化了这个示例,只是为了让基本的日期过滤工作正常,这样我就可以在之后连接标签等。这是一把简化的小提琴:
简化小提琴:好吧,你的问题很简单,你的输入在你的控制器之外,所以即使你使用了
ng change
,它也不会被调用
我修正了你的密码。我还增加了过滤功能;它只适用于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;
}
})
}
$scope.onChangeFromDate=function(){
var fromDate=$.datepicker.parseDate('dd/mm/yy',$scope.dateFrom);
angular.forEach($scope.purchases.data,函数(purchase){
var purchaseDate=$.datepicker.parseDate('dd/mm/yy',purchase.date);
if(purchaseDate.getTime()
谢谢!这看起来效果很好,但是在我的原始示例中,我有三个控制器,我该如何处理这个问题呢?我是否需要重构它以便整个过程只使用一个控制器,或者我可以在过滤器周围设置一个控制器来工作?实际上,这个解决方案中的过滤只在第一次工作。第二次似乎没有将筛选器应用于原始数据集。忘记重置筛选器,已更新