AngularJS читает данные из контроллера в таблицу - PullRequest
Новая
       35

AngularJS читает данные из контроллера в таблицу

0 голосов
/ 05 мая 2018

Я просто пытаюсь зачитать данные из balanceTableCtr и показать их в balanceTable. Но это просто показывает мне пустую таблицу.

balanceTableCtr.js: 

(function () {
    'use strict';

    angular.module('BlurAdmin.pages.dashboard')
        .controller('BalanceTableCtrl', BalanceTableCtrl);

    /** @ngInject */
    function BalanceTableCtrl($scope) {
        $scope.balanceTableData = [
            {
              image: 'app/browsers/chrome.svg',
              algorithm: 'SHA-256',
              name: 'Bitcoin',
              price: '9843 $',
              change: '12.6 %',
              isChangeUp: true,
              amount: '2.452 BTC'
            }
          ];
    }
})();

balanceTable.directive.js: 

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard')
      .directive('balanceTable', balanceTable);

  /** @ngInject */
  function balanceTable() {
    return {
      restrict: 'E',
      controller: 'BalanceTableCtrl',
      templateUrl: 'app/pages/dashboard/balanceTable/balanceTable.html'
    };
  }
})();

balanceTable.html: 

<div class="horizontal-scroll">
  <table class="table table-hover">
    <thead>
    <tr class="black-muted-bg">
      <th class="align-right">Algorithm</th>
      <th class="align-right">Name</th>
      <th class="align-right">Price</th>
      <th class="align-right">Change 24h</th>
      <th class="align-right">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in balanceTableData" class="no-top-border">
      <td class="align-right">{{item.algorithm}}</td>
      <td class="align-right">{{item.name}}</td>
      <td class="align-right">{{item.price}}</td>
      <td class="align-right">{{item.change}}</td>
      <td class="align-right">{{item.amount}}</td>
    </tr>
    </tbody>
  </table>
</div>

dashboard.html: 

<div class="row">
  <div class="col-lg-6 col-md-12">
    <div ba-panel ba-panel-title="Hover Rows" ba-panel-class="with-scroll table-panel">
      <div include-with-scope="app/pages/dashboard/balanceTable/balanceTable.html"></div>
    </div>
  </div>
</div>

Я очень новичок в Angular 1. Но я смотрел в Интернете все вокруг, и все они так делают. Почему не работает?

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Большое спасибо. Решением было то, что мне пришлось добавить ng-контроллер в тег tbody. 

<tbody ng-controller="BalanceTableCtrl">
    <tr ng-repeat="item in balanceTableData" class="no-top-border">
      <td class="align-right">{{item.algorithm}}</td>
      <td class="align-right">{{item.name}}</td>
      <td class="align-right">{{item.price}}</td>
      <td class="align-right">{{item.change}}</td>
      <td class="align-right">{{item.amount}}</td>
    </tr>
</tbod>
0 голосов
/ 05 мая 2018

Проверить этот планер 

<div class="row">
<div class="col-lg-6 col-md-12">
  <div ba-panel ba-panel-title="Hover Rows" ba-panel-class="with-scroll table-panel">
    <balance-table> </balance-table> 
  </div>
</div>
...