javascript - NG-Repeat 和 ng-table 问题

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){
	 $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 并且工作正常。