2016-11-16 3 views
-1

Я пытаюсь запустить простой код для ngTable, но отображается только заголовки и данные не отображаются. Я использую последнюю документацию для ngTable.NgTable, не отображающий данные, отображаются только заголовки

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/bundles/ng-table.min.css"> 
<script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script> 
<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
</head> 

<body> 
    <div ng-app="myApp" ng-controller="ctrl"> 
     <table ng-table="vm.tableParams" class="table" show-filter="true"> 
      <tr ng-repeat="user in $data"> 
       <td title="'Name'" filter="{ name: 'text'}" sortable="'name'"> 
        {{user.name}}</td> 
       <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"> 
        {{user.age}}</td> 
      </tr> 
     </table> 
    </div> 
</body> 

</html> 
<script type="text/javascript"> 
angular.module("myApp", ["ngTable"]) 
    .controller('ctrl', ['NgTableParams', function(NgTableParams) { 
     var vm = this; 
     var data = [{ 
      name: "Moroni", 
      age: 50 
     }, { 
      name: "Moroni", 
      age: 50 
     }, { 
      name: "Moroni", 
      age: 50 
     }]; 
     vm.tableParams = new NgTableParams({}, { 
      dataset: data 
     }); 

    }]) 
</script> 

ответ

1

Вы путаете контроллер и контроллер в качестве синтаксиса вместе,

HTML

<div ng-controller="ctrl"> 
     <table ng-table="tableParams" class="table" show-filter="true"> 
     <tbody> 
      <tr ng-repeat="row in $data"> 
      <td data-title="'Name'" sortable="'name'">{{ row.name }}</td> 
      <td data-title="'Age'" sortable="'age'">{{ row.age }}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

Контроллер

var app = angular.module('ngTableApp', ['ngTable']) 
    .controller('ctrl', function($scope, $filter, $q, NgTableParams) { 
    var data = [{ 
     name: "Moroni", 
     age: 50 
    }, { 
     name: "Moroni", 
     age: 50 
    }, { 
     name: "Moroni", 
     age: 50 
    }]; 
    $scope.tableParams = new NgTableParams({ 
     page: 1, 
     count: 10 
    }, { 
     data: data 
    }); 

    }) 

DEMO

+0

Что это означает смешивание контроллер и контроллер? не могли бы вы рассказать? – MaazKhan47

+1

Вы должны использовать его как ng-controller = "ctrl as vml"> – Sajeetharan

+0

Получил его :) Спасибо – MaazKhan47

1

проблема была с вашей переменной данных, к которой вы обращались в поле зрения.

angular.module("myApp", ["ngTable"]) 
 
    .controller('ctrl', ['NgTableParams','$scope', function(NgTableParams,$scope) { 
 
     var vm = this; 
 
     var data = [{ 
 
      name: "Moroni1", 
 
      age: 50 
 
     }, { 
 
      name: "Moroni2", 
 
      age: 50 
 
     }, { 
 
      name: "Moroni3", 
 
      age: 50 
 
     }]; 
 
     $scope.data = data; 
 
     vm.tableParams = new NgTableParams({}, { 
 
      dataset: data 
 
     }); 
 

 
    }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script> 
 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/bundles/ng-table.min.css"> 
 
<script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="ctrl"> 
 
     <table ng-table="vm.tableParams" class="table" show-filter="true"> 
 
      <tr ng-repeat="user in data"> 
 
       <td title="'Name'" filter="{ name: 'text'}" sortable="'name'"> 
 
        {{user.name}}</td> 
 
       <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"> 
 
        {{user.age}}</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body> 
 

 
</html>

+0

Что на самом деле проблема с переменной? – MaazKhan47

+0

У вас был доступ в представлении рядом с пользователем ng-repeat, как пользователь в переменной $ data и data, является локальной переменной, а не частью области – Jigar7521

+0

, если я использую «vm.data», не делает ли это частью области? – MaazKhan47

Смежные вопросы