0
私はSpring-boot、thymeleaf、Angularjsを使用しています。私のview.htmlでは、 "controller.java"クラスの "lstUsers"リストをAngularを使って回復する必要があります。thymeleafオブジェクトをangularjsに渡す方法
"view.html"と "controller.java"はうまくいきます。問題は、私は、これはこれはこれは
<body>
<div role="main" class="container theme-showcase">
<div class="" style="margin-top:90px;">
<div class="col-lg-8">
<div class="bs-component" ng-controller="listdata">
<form class="form-inline">
<div class="form-group">
<input type="text" ng-model="search" class="form-control input-style search-input" placeholder="Search" />
</div>
</form>
<table class="table table-responsive table-hover table-striped table-bordered tablesorter">
<thead>
<tr>
<th ng-click="sort('id')">Id
<span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('first_name')">First Name
<span class="glyphicon sort-icon" ng-show="sortKey=='first_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('last_name')">Last Name
<span class="glyphicon sort-icon" ng-show="sortKey=='last_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('hobby')">Hobby
<span class="glyphicon sort-icon" ng-show="sortKey=='hobby'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.hobby}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</div>
</div>
<script th:src="@{/js/angular/angular.js}"></script>
<script th:src="@{/js/dirPagination.js}"></script>
<script th:src="@{/js/app.js}"></script>
</body>
私view.htmlあるapp.js
var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($scope, $http){
$scope.users = [];
$scope.users = $lstUsers; // (lstUsers) is an object from controller.java: this not work !!!!!!!
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
});
ある
"lstUsers" と私の変数 "$ scope.users" を埋めることができる方法でありますあなたの答えのための私のcontroller.javaのスニペットは
...
@RequestMapping(value = "/getSubTasks")
public ModelAndView getSubTasks(@RequestParam String issueKey) {
ModelAndView model = new ModelAndView();
.....
model.setViewName("view");
model.addObject("lstUsers", getUsers());
}
return model;
}
...
おかげ
おかげxSNRG、アプリケーションのソフトウェアarchitecteはそのような何かを課します。これは私がそのようなデータを取得する必要がある理由です –
この場合、データは一度読み込まれ、ページ全体が読み込まれ、決して変更されません。ただし、これが必要な場合は、最初にAngularコントローラの$ scope.usersに割り当てることができるように、JavaのサブタスクリストをJSONストリングにシリアル化する必要があります。 javaオブジェクトをJSONにシリアル化する方法の例を次に示します：mkyong.com/java/jackson-2-convert-java-object-to-from-json。その後、Spring MVC ControllerでJSON文字列を作成し、それをthymeleafテンプレートで読み取ることができます。ここで、それをAngularコントローラーに割り当てることができます。 – xSNRG
app.jsでserializeオブジェクトを取得する方法はありますか？ –