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 に答える