Angular jsでグリッドビューを作成

Question

JSON形式のレスポンスとしてデータベースからデータが来るテーブルのグリッドビューを作成するのが難しいです。 UIとJavascriptコードは同じファイルにあります。アプリケーションのルートパスにnpmパッケージを使用してng-gridをインストールしました。

Index.htmlと

<script src="node_modules/angular-ui-grid/ui.grid.min.js"></script> 
<script src="ng-grid-2.0.11.min.js"></script> 

<table style="width:50%" class="table table-bordered"> 
     <thead> 
     <tr> 
      <th>Select</th> 
      <th>FR_ID</th> 
      <th>FR_Client</th> 
      <th>FR_Source</th> 
      <th>FR_Destination</th> 
     </tr> 
     </thead> 

     <tbody> 
      <tr ng-repeat="search in searches"> 
      <td><input type="checkbox" /></td> 
      <td>{{search.id}}</td> 
      <td>{{search.client}}</td> 
      <td>{{search.source}}</td> 
      <td>{{search.destination}}</td> 
      </tr> 
     </tbody> 

    </table> 
      <div class="small-12 columns"> 
        <div class="submitButton" id="submitButton" ng-app="searchapp"> 
         <div style="visibility:hidden;">{{y=name}}</div> 

         <input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" /> 
        </div> 
       </div> 
      </div> 

角度：

 <script> 
      var app = angular.module('myApp',[]); 
      app.controller('myCtrl', function ($scope, $http){ 

      $scope.seachRecords = function (y) { 
       var httpRequest = $http({ 
        method: 'GET', 
        url: '/user/search?seachString='+y, 

       }).then(function (response, status) { 

        var responsetest = JSON.stringify(response.data); 

        $scope.searches = response.data; 

       }, function myError(data, status) { 
        $scope.searches = data;  
       }); 
      } 
     }); 
    </script> 

私は添付画像に示すように、テーブルの下に作成することができるが、私は、グリッドビューを取得しようと、それを形成することができないのですこれに必要な変更を提案してください。

<div data-ng-grid="searches"></div> 

NOTEを次のように

Answer 1

JSONデータをグリッドビューで使用可能でなければなりません： 'responsetest' 変数が使用されていないように見えます。

応答は「検索」に直接添付することができます。グリッドビューでは、検索データにアクセスするための 'data'プロパティが必要です。

角度

$scope.searches = JSON.stringify(response); 

Answer 2

これを試してみてください？

HTML：

<script src="node_modules/angular-ui-grid/ui.grid.min.js"></script> 
<script src="ng-grid-2.0.11.min.js"></script> 

<div ng-grid="searches"></div> 

<div class="small-12 columns"> 
    <div class="submitButton" id="submitButton" ng-app="searchapp"> 
     <div style="visibility:hidden;">{{y=name}}</div> 

     <input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" /> 
    </div> 
</div> 

JS：

<script> 
    var app = angular.module('myApp',[]); 
    app.controller('myCtrl', function ($scope, $http){ 
     $scope.seachRecords = function (y) { 
      var httpRequest = $http({ 
       method: 'GET', 
       url: '/user/search?seachString='+y, 

      }).then(function (response, status) { 

       var responsetest = JSON.stringify(response.data); 

       $scope.searches = { 
       data: response.data 
       } 

      }); 
     } 
    }); 
</script> 

NG-グリッドの実装後： http://angular-ui.github.io/ui-grid/