我是 AngularJS 的新手，一直想知道处理以下情况的最佳方法:
1. 我需要显示过去 30 天的数据行。 (默认选项)
我是怎么做的:当页面加载时，Spring Controller 将列表放在模型属性中。
@RequestMapping(value="/show/data", method = RequestMethod.GET)
public String getDataPage(ModelMap model) {
//cropped for brevity
List<Data> dataList = dataService.getData(fromDate, toDate);
model.addAttribute("dataList ", dataList );
return "data-page";
}
在 JSP 中，我使用 EL 标记循环遍历列表并以表格形式向用户显示数据
<c:forEach var="currentData" items="${dataList}">
<tr>
<td>${currentData.name}</td>
<td>${currentData.address}</td>
<td>${currentData.email}</td>
<td>${currentData.phone}</td>
</tr>
</c:forEach>
- 用户可以选择日期范围，并且根据所选范围(例如今天、昨天、上周、上个月、自定义范围)，显示的数据应该会更新。
我是怎么做的:我正在使用 Bootstrap-Daterangepicker ( https://github.com/dangrossman/bootstrap-daterangepicker ) 来显示标记。它为我提供了一个回调函数。
$('#reportrange').daterangepicker(options, callback);
例如$('#reportrange').daterangepicker(options, function(startDate, endDate){});
如果没有 AngularJS，这将变得一团糟。 我可以调用 jQuery ajax，然后获取一个列表，然后在 jQuery 中处理 DOM 元素。但这很乱。
如何在这种情况下包含 AngularJS 以使我的生活更轻松。 (而且代码更简洁) 请帮忙。我卡住了。
请您参考如下方法:
您必须使用 Angular $http service .为了更好的抽象，你应该使用 $resource service .
var mod = angular.module('my-app', ['ngResource']);
function Controller($scope, $resource) {
var User = $resource('http://serveraddress/users?from=:from&to=:to', null, {
getAll: {method: 'JSONP', isArray: true}
});
$scope.changeDate = function(fromDate, toDate) {
$scope.users = User.getAll({from: fromDate, to: toDate});
};
$scope.users = User.getAll();
}
<html ng-app="my-app">
<div ng-controller="Controller">
<input type="text" my-date-picker="changeDate($startDate, $endDate)" />
<table>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.address}}</td>
</tr>
</table>
</div>
</html>
为了适应 DateSelector，您希望创建一个指令来封装它的要求。最简单的一个是:
mod.directive('myDatePicker', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
$(element).daterangepicker({}, function (startDate, endDate) {
scope.$eval(attr.myDatePicker, {$startDate: startDate, $endDate: endDate});
});
}
};
});
无需担心同步问题。由于 $resource 基于 promises , 它会在数据准备好时自动绑定(bind)。
