2017-02-22 30 views
0

Я пытаюсь выполнить руководство Here по использованию ng-Table. Если я загружу весь пример из Git, он загрузится нормально, но попытается выполнить хотя бы самый простой пример: тогда загружаются столбцы и фильтры, но нет строк? Если я добавлю еще одну строку в HTML вручную, она появится, так что проблема, похоже, связана с привязкой данных или ng-repeat. В консоли нет ошибок.angularjs ng-table/ng-repeat rows not loading

enter image description here

Пример кода:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script> 
    <link rel="stylesheet" ; href="https://unpkg.com/[email protected]/bundles/ng-table.css"> 
    <script src="https://unpkg.com/[email protected]/bundles/ng-table.js"></script> 
</head> 
<body> 

    <div ng-app="MyApp" ng-controller="MyCtrl"> 

     <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> 


    <script> 
     var app = angular.module("MyApp", ["ngTable"]); 

     app.controller('MyCtrl', function ($scope, NgTableParams) { 
      var self = this; 
      var data = [{ name: "Moroni", age: 50 } /*,*/]; 
      self.tableParams = new NgTableParams({}, { dataset: data }); 
     }); 

    </script> 
</body> 
</html> 

ответ

1

Вы гаванью» t указала ссылку на ваш контроллер.

Измените код на <div ng-app="MyApp" ng-controller="MyCtrl as vm"> и он будет работать так, как вы ожидаете.

Рабочий пример: http://codepen.io/DeividasK/pen/qrWqey?editors=1010

+0

Спасибо, что работает :) –

+0

Рад слышать. Обязательно отметьте вопрос как ответ, чтобы другие могли сэкономить время;) –

0

Вы не назначаете объект в рамках

попробовать это ниже код вместо кода

app.controller('MyCtrl', function ($scope, NgTableParams) { 
     var self = this; 
     self.data = [{ name: "Moroni", age: 50 } /*,*/]; 
     self.tableParams = new NgTableParams({}, { dataset: self.data }); 
    }); 
+0

Спасибо за ответ, я поменял ваш код, но результат тот же. –

+0

@JoshuaCook упс! также вам нужно изменить эту строку 'ng-table =" vm.tableParams "' to 'ng-table =" tableParams "' –

+0

Привет, я пробовал это, но, как ни странно, не работает? Однако изменение «ng-controller =« MyCtrl »« to »ng-controller =« MyCtrl as vm »работает как ожидалось :) –

0

Это нг таблицы, проблема заключается в использовании контроллера в качестве виртуальной машины, просто удалить виртуальную машину или поставить контроллер в VM, и это работа.

<table ng-table="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>