Ng-Repeat and ng-table issue

Question

Angular JSの新機能です。以下のコードは機能しません。私はNg-Repeatでデータテーブルを試しました。しかし、並べ替えをせずに表を表示するだけで、ページ区切りオプション。

応答データは、次のようになります。

[{ 
    \"ACCOUNT_LOCAL\":\"9007\",\"COMPANY_ID\":\"10001\", 
    \"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"9008\", 
    \"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\", 
    \"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\", 
    \"ACTIVE\":true 
},   
{ 
    \"ACCOUNT_LOCAL\":\"9008\",\"COMPANY_ID\":\"10001\", 
    \"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"9009\", 
    \"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\", 
    \"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\", 
    \"ACTIVE\":true 
},{ 
    \"ACCOUNT_LOCAL\":\"9014\",\"COMPANY_ID\":\"10001\", 
    \"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"TEST\", 
    \"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\", 
    \"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\", 
    \"ACTIVE\":true 
}, 

HTMLファイル

<div ng-app="myApp" ng-controller="AccountMappingCtrl as vm"> 
 
    <table ng-table="vm.tableParams" show-filter="true" class="table"> 
 
    <tr ng-repeat="accountMap in $data"> 
 
     <td title="'IC_PARTNER'" filter="{ IC_PARTNER: 'text'}" sortable="'IC_PARTNER'"> 
 
     {{ accountMap.IC_PARTNER }} 
 
     </td> 
 
     <td title="'ACCOUNT_GLOBAL'" filter="{ ACCOUNT_GLOBAL: 'text'}" sortable="'ACCOUNT_GLOBAL'"> 
 
     { accountMap.ACCOUNT_GLOBAL }} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

JSファイル：

var app = angular.module('myApp', [ 'ngTable']); 
app.controller('AccountMappingCtrl', ['$scope', '$http','$cookies', 'NgTableParams', function($scope, $http, $filter, NgTableParams) { 

$http.get("http://localhost:52087/api/accountmapping") 
    .then(function(response) { 
    var convertJson = angular.fromJson(response.data); 
    var self = this; 
    var data = convertJson; 
    self.tableParams = new NgTableParams({}, { dataset: data}); 
    }); 
}); 

Answer 1

var myApp = angular.module('myApp',["ngTable"]); 
 

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 

 
myApp.controller('MyCtrl',function($scope,NgTableParams){ 
 
\t $scope.name = 'Superhero'; 
 
    var data = [{ 
 
    "ACCOUNT_LOCAL":"9007","COMPANY_ID":"10001", 
 
    "ACCOUNT_GLOBAL":"100001","IC_PARTNER":"9008", 
 
    "ACCOUNT_GLOBAL_DESC":"AUS GLOBAL", 
 
    "ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK", 
 
    "ACTIVE":true 
 
},   
 
{ 
 
    "ACCOUNT_LOCAL":"9008","COMPANY_ID":"10001", 
 
    "ACCOUNT_GLOBAL":"100001","IC_PARTNER":"9009", 
 
    "ACCOUNT_GLOBAL_DESC":"AUS GLOBAL", 
 
    "ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK", 
 
    "ACTIVE":true 
 
},{ 
 
    "ACCOUNT_LOCAL":"9014","COMPANY_ID":"10001", 
 
    "ACCOUNT_GLOBAL":"100001","IC_PARTNER":"TEST", 
 
    "ACCOUNT_GLOBAL_DESC":"AUS GLOBAL", 
 
    "ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK", 
 
    "ACTIVE":true 
 
}] 
 
//your HTTP call here 
 
    $scope.tableParams = new NgTableParams({}, { dataset: data}); 
 
})

<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    Hello, {{name}}! 
 
    
 
    <table ng-table="tableParams" show-filter="true" class="table"> 
 
    <tr ng-repeat="accountMap in $data"> 
 
     <td title="'IC_PARTNER'" filter="{ IC_PARTNER: 'text'}" sortable="'IC_PARTNER'"> 
 
     {{ accountMap.IC_PARTNER }} 
 
     </td> 
 
     <td title="'ACCOUNT_GLOBAL'" filter="{ ACCOUNT_GLOBAL: 'text'}" sortable="'ACCOUNT_GLOBAL'"> 
 
     {{ accountMap.ACCOUNT_GLOBAL }} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    
 
    
 
</div> 
 
<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css"> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> 
 
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

タイプは、あなたのコード{ accountMap.ACCOUNT_GLOBAL }}であり、私はあなたのテストデータのフィドルを行った{{ accountMap.ACCOUNT_GLOBAL }}

でなければなりません。 this fiddleをチェックしてください。正常に動作しています。