2

我是 AngularJS 的新手，一直想知道处理以下情况的最佳方法：

1.我需要显示过去 30 天的数据行。（默认选项）

我是怎么做的：当页面加载时，Spring 控制器将列表放入模型属性中。

@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>
  1. 用户可以选择日期范围并根据所选范围（例如今天、昨天、上周、上个月、自定义范围），显示的数据应该更新。

我是怎么做的：我正在使用 Bootstrap-Daterangepicker ( https://github.com/dangrossman/bootstrap-daterangepicker ) 来显示标记。它为我提供了一个回调函数。

$('#reportrange').daterangepicker(options, callback);

例如$('#reportrange').daterangepicker(options, function(startDate, endDate){});

如果没有 AngularJS，这将是一团糟。我可以调用 jQuery ajax，然后获取一个列表，然后在 jQuery 中处理 DOM 元素。但这很混乱。

我如何在这种情况下包含 AngularJS 以使我的生活更轻松。（而且代码不那么干净）请帮忙。我被困住了。

4

2 回答 2

6

您必须使用 Angular $http 服务。为了更好的抽象，您应该使用$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的，它会在数据准备好时自动绑定。

于 2013-03-01T13:07:47.693 回答
1

你应该这样做：

SpringMVC 控制器：

@RequestMapping(value="/load/{page}", method = RequestMethod.POST)  
public @ResponseBody String getCars(@PathVariable int page){  
            //remember that toString() has been overridden  
            return cars.getSubList(page*NUM_CARS, (page+1)*NUM_CARS).toString();  
}

AngularJS 控制器：

function carsCtrl($scope, $http){  
    //when the user enters in the site the 3 cars are loaded through SpringMVC  
    //by default AngularJS cars is empty  
    $scope.cars = [];  

    //that is the way for bindding 'click' event to a AngularJS function  
    //javascript cannot know the context, so we give it as a parameter  
    $scope.load = function(context){  
       //Asynchronous request, if you know jQuery, this one works like $.ajax  
       $http({  
              url: context+'/load/'+page,  
              method: "POST",  
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}  
       }).success(function (data, status, headers, config) {  
              //data contains the model which is send it by the Spring controller in JSON format  
              //$scope.cars.push is the way to add new cars into $scope.cars array  
              for(i=0; i< data.carList.length; i++)  
                 $scope.cars.push(data.carList[i]);  

              page++; //updating the page  
              page%=5; //our bean contains 15 cars, 3 cars par page = 5 pages, so page 5=0  

        }).error(function (data, status, headers, config) {  
              alert(status);  
        });             
    }  
}

看法

<!-- Activating AngularJS in the entire document-->  
<html ng-app>  
    <head>  
        <!-- Adding AngularJS and our controller -->  
        <title>Luigi's world MVC bananas</title>  
        <link href="css/style.css" rel="stylesheet">  
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>  
        <script src="js/controller.js"></script><!-- our controller -->  
    </head>  
    <!-- Activating carsCtrl in the body -->  
    <body ng-controller="carsCtrl">  

         <div class="carsFrame">  

               <!-- AngularJS manages cars injection after have loaded the 3 first-->  
               <!-- We use ng-src instead src because src doesn't work in elements generated by AngularJS  -->  
               <div ng-repeat="car in cars" class="carsFrame">  
                   <img ng-src="{{car.src}}"/>  
                   <h1>{{car.name}}</h1>  
               </div>  
         </div>  

         <div id="button_container">  
               <!-- ng-click binds click event with AngularJS' $scope-->  
               <!-- Load function is implemented in the controller -->  
               <!-- As I said in the controller javascript cannot know the context, so we give it as a parameter-->  
               <button type="button" class="btn btn-xlarge btn-primary" ng-click="load('${pageContext.request.contextPath}')">3 more...</button>  
         </div>  
    </body>  
</html>

完整的例子在这里

于 2013-12-12T08:39:43.883 回答