我有一个表,表头有5个单元格,每个单元格对应一个星期(例如:01周,02周,依此类推)。
在第一个单元格中,周的格式如下:
<div class="monthCells">Week {{vm.selectedPeriod}}</div>
结果是标题单元格中的文本:“ Week 01”。
控制器中显示星期数的代码是:
return moment.utc(this.date).format("WW");
它总是返回所选月份的第一个星期的编号,
用户可以使用日期选择器从一个月到另一个月,并在表格中显示该月的星期。
显示其他4周的最佳方法是什么?
因为我只得到第一周的电话号码,所以我要在其他四个单元格中输入什么?
我在考虑一个计数器,因此它为我得到的数字加上+1:
return moment.utc(this.date).format("WW");
但是问题是,这不会出现在ng-repeat中,但是表头是静态的,因此我正在考虑的一种解决方案是在5个头单元格中放置如下内容:
{{vm.selectedPeriod}}
{{vm.selectedPeriod +1}}
{{vm.selectedPeriod +2}}
{{vm.selectedPeriod +3}}
{{vm.selectedPeriod +4}}
因此,当用户切换月份时,每周的数字将是正确的,但是它将不起作用,因为我从函数中获取了一个字符串,并且无法弄清楚如何使用momentJS在该函数中对其进行解析。
如果有人对我的想法有解决方案,或者有更好的方法实现这一目标,请告诉我
编辑解决方案:
最后,我找到了仅使用momentJS的解决方案。
{{vm.date | amDateFormat : 'WW'}}
{{vm.date | amAdd : '1' : 'w' | amDateFormat : 'WW'}}
{{vm.date | amAdd : '2' : 'w' | amDateFormat : 'WW'}}
最佳答案
我可以使用一个简单而智能的过滤器(例如在此Demo fiddle中创建的过滤器)来执行此操作:
视图
<div ng-controller="MyCtrl">
<div class="monthCells">Week {{currentDate|dateWeekFilter:0}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:1}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:2}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:3}}</div>
</div>
AngularJS应用
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.currentDate = moment.utc();
});
myApp.filter('dateWeekFilter', function () {
return function (date, weeksToAdd) {
return moment(date).add(weeksToAdd, 'w').format("WW");
}
});
完整的解决方案,包括:
selectedPeriod
范围和日期选择器>> Demo fiddle:
视图
<div ng-controller="MyCtrl">
<datepicker>
<input ng-model="datePickerDate" ng-change="dateChanged()" type="text"/>
</datepicker>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+1}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+2}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+3}}</div>
</div>
AngularJS应用
var myApp = angular.module('myApp',['720kb.datepicker']);
myApp.controller('MyCtrl', function ($scope) {
//Init
$scope.currentDate = moment.utc();
$scope.datePickerDate = $scope.currentDate.toDate();
$scope.selectedPeriod = 0;
//date change handling
$scope.dateChanged = function () {
$scope.currentDate = moment.utc($scope.datePickerDate);
}
});
myApp.filter('dateWeekFilter', function () {
return function (date, weeksToAdd) {
return moment(date).add(weeksToAdd, 'w').format("WW");
}
});