Ng-Repeat 和 ng-table 问题答案

【问题标题】：Ng-Repeat and ng-table issueNg-Repeat 和 ng-table 问题
【发布时间】：2017-09-12 18:07:55
【问题描述】：

我是 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});
    });
});

【问题讨论】：

你遇到了什么错误？
ngTableParams 未定义 - 控制台错误
应该是new NgTableParams 吗？
我应该删除新的吗？
不...应该是new NgTableParams(...)看到Ng中的n是大写ng-table.com/#/intro/demo-real-world

标签： javascript angularjs datatables angularjs-scope angularjs-ng-repeat

【解决方案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 }}

我已经修改了您的测试数据。请检查thisfiddle，它工作正常。

【讨论】：