thymeleafリストを角でフィルタリングする方法

Question

私は自分のthymeleafベースのサイトに追加しようとしていて、与えられたリストをフィルタリングするためのユーザ入力を追加したいと思っています。私は非常にいくつかの方法を試みましたが、私は壁にぶつかっています。だから、誰かが私にデータをAngularに渡す方法を教えてくれればすばらしいでしょう。

この

リスト/ thymeleaf内のテーブルです：

<p>Type a letter in the input field:</p> 
<p> 
    <input type="text" ng-model="test"> 
</p> 

I：私はそこに任意のより多くのデータが必要であるかわからない

<table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Manufacturer</th> 
      <th>Type</th> 
      <th>Characteristics</th> 
      <th class="text-center">Quantity</th> 
      <th class="text-center" colspan="2">Administration Actions</th> 
     </tr> 
     <th:block th:each="item, iterStat : ${list}" varStatus="status"> 
      <tr> 
       <td th:text="${iterStat.count}"></td> 
       <td th:text="${item.manufacturer.name}"></td> 
       <td th:text="${item.type}"></td> 
       <td th:text="${item.characteristics}"></td> 
       <td class="text-center" th:text="${item.quantity}"></td> 
       <td class="text-center"><a th:href="@{${'fuses/' + item.id}}" 
        class="btn btn-warning btn-sm"> <span 
         class="glyphicon glyphicon-edit"></span> Edit 
       </a> <a th:href="@{${'fuses/' + item.id + '/delete'}}" 
        class="btn btn-danger btn-sm"> <span 
         class="glyphicon glyphicon-trash"></span> Delete 
       </a></td> 

      </tr> 
     </th:block> 
</table> 

、これは私が使用されるモック検索段落がありますメーカーによってリストをフィルタリングしたい。

Answer 1

まず、thymeleafは、サーバーサイドで生成されたhtmlを提供するテンプレートエンジンです。 AngularJSはクライアント側です。 thymemeafレンダリングを使用すると、角度データバインディングを使用できなくなります。そして、あなたはこの機能を得るために汚いJSをやろうとしています。

、あなたのWebアプリケーションに角度フィルタを取得したい場合は、する必要があります：角度に

• パスデータを。したがって、JSONデータを提供するRESTサービスを使用する必要があります。このために、バックエンドコードを変更する必要があります。 @ResponseBodyではなくStringまたはModelAndViewを返すべきではありません。

• これを取得したら、サーバが提供するJSONデータへの参照をスコープ内に保持するコントローラを定義してAngularJSを組み込みます。

• JSONデータはXHR（AngularJS〜4 HttpClientの場合、Angular 1.x $ http || $リソース）のサービスを介して収集する必要があることに注意してください。このサービスは、依存関係としてコントローラに注入する必要があります。

あなたのビューのコードは次のようになります。

(function(){ 
    'use strict'; 
    angular.module('YourAngularDeclaredModule').controller('YourAngularController', ['$scope','YourFactory',function($scope, YourFactory){ 
     $scope.items = []; 
     YourFactory.fetchAll().then(function(xhrData){ 
      $scope.items = xhrData.data; 
     } 
     }).catch(function(data){ 
      console.log('error'); 
     }); 
    }]); 
})(); 

：

<div ng-controller="YouAngularController"> 
    <p>Type a letter in the input field:</p> 
    <p> 
     <input type="text" ng-model="test"> 
    </p> 
    <table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Manufacturer</th> 
      <th>Type</th> 
      <th>Characteristics</th> 
     </tr> 
     <tr ng-repeat="item in items | filter : test"> 
      <td th:text="{{::item.id}}"></td> 
      <td th:text="{{::item.manufacturer.name}}"></td> 
      <td th:text="{{::item.type}}"></td> 
      <td th:text="{{::item.characteristics}}"></td> 
     </tr> 
    </table> 
</div> 

お知らせそのテストはAngularJSコントローラーのためにNG-モデル

によってバインドさあなたの範囲、内のオブジェクトであります

これらのリンクは、たとえば次のとおりです。 https://github.com/meyacine/angular-restapi-tutorial

アーキテクチャに大きな影響がある場合は、RESTに変更してください。 jQuery DataTablesを使用して、質問された機能を取得することをお勧めします。

幸運:)