我有新AngularJS和被套牢想知道接近下列情况下的最佳方式:
1 我需要显示的数据行的最后30天。 (默认选项)
我如何做:页面加载后,春节操控者将在模型的属性列表
@RequestMapping(值=/显示/数据,方法= RequestMethod.GET) 公共字符串getDataPage(ModelMap模型){ //裁剪为简洁 清单<数据> DataList控件= dataService.getData(寄件者,TODATE); model.addAttribute(DataList控件,DataList控件); 返回数据页; }
和在JSP我使用EL标签遍历列表并显示用户的数据以表格形式
c为C:VAR的forEach =CURRENTDATA项=$ {}的DataList> &所述; TR> < TD> $ {currentData.name}< / TD> < TD> $ {currentData.address}< / TD> < TD> $ {currentData.email}< / TD> < TD> $ {currentData.phone}< / TD> < / TR>< / C:的forEach>
用户有一个选项可以选择日期范围和放大器;根据选择的范围(如今天,昨天,上周,上个月,自定义范围),显示的数据应该更新。
我如何做:我使用的是引导,Daterangepicker( https://github.com/dangrossman/bootstrap-daterangepicker )显示标记。这为我提供了一个回调函数。
$('#reportrange')daterangepicker(选项,回调)。
例如。 $('#reportrange')daterangepicker(选项,函数(的startDate,结束日期){});
如果没有AngularJS,这将是混乱的。我可以打电话给jQuery的阿贾克斯再绕获取一个列表,然后乱用从内部的jQuery的DOM元素。但是,这是混乱的。
我怎么能包括在这种情况下AngularJS使我的生活更轻松。 (和code少了很多清洁)请帮忙。我卡住了。
解决方案您必须使用角 $ http服务。为了更好的抽象,你应该 $资源服务去了。
VAR MOD = angular.module('我的应用',['ngResource']);功能控制器($范围,$资源){ VAR用户= $资源(的http:// serveraddress /用户=:从&安培;为=:为,空,{ GETALL:{方法:JSONP',IsArray的:真正} }); $ scope.changeDate =功能(寄件者,TODATE){ $ scope.users = User.getAll({来自:寄件者,于:TODATE}); }; $ scope.users = User.getAll();}
< HTML NG-应用程序=我的应用>< DIV NG控制器=控制器> <输入类型=文本我-日期选择器=CHANGEDATE($的startDate,$结束日期)/> <表> < TR NG重复=用户用户> < TD> {{user.name}}< / TD> &所述; TD> {{user.address}}&下; / TD> < / TR> < /表>< / DIV>< / HTML>
要容纳的DateSelector,你想创建一个指令来封装其要求。最简单的一个是:
mod.directive('myDatePicker',函数(){ 返回{ 限制:'A', 链接:功能(范围,元素,属性){ $(元素).daterangepicker({}功能(的startDate,结束日期){ 。范围$的eval(attr.myDatePicker,{$开始日期:的startDate,$结束日期:结束日期}); }); } };});
没有必要与同步担心。如$资源是基于承诺时,它将被自动地当数据准备好约束。
I've new to AngularJS and is stuck wondering about the best way to approach the following situation:
1. I need to show rows of data for the last 30 days. (default option)
How I'm doing it: When the page loads, the Spring controller puts the list in the model attribute.
@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";
}
And in the JSP I'm using EL tags to loop through the List and show user the data in tabular form
<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>
The user has an option to select the date range & depending on the range selected(e.g. today, yesterday, last week, last month, custom range), the data shown should update.
How I'm doing it: I'm using Bootstrap-Daterangepicker (https://github.com/dangrossman/bootstrap-daterangepicker) to show the markup. It provides me a callback function.
$('#reportrange').daterangepicker(options, callback);
e.g. $('#reportrange').daterangepicker(options, function(startDate, endDate){});
Without AngularJS, this is going to be messy. I can call jQuery ajax and then fetch a list, then mess around with the DOM elements from within jQuery. But this is messy.
How can I include AngularJS in this scenario to make my life easier. (and the code a lot less cleaner) Please help. I'm stuck.
解决方案You must use Angular $http service. For even better abstraction, you should go with $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>
To accomodate the DateSelector, you wish to create a directive to encapsulate its requirements. The simplest one would be:
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});
});
}
};
});
No need to worry with synchronism. As $resource is based on promises, it will be automagically bound when data is ready.
相关推荐
最新文章