AngularJS read data from controller to table

Question

I simply try to read out data from the balanceTableCtr and show it in the balanceTable. But it just shows me an empty table.

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>

I'm very new to Angular 1. But I looked in the Internet all around and they all do it that way. Why is it not working?

Change .directive('balanceTable', balanceTable); to .directive('balanceTable', dashboardLineChart); — Shashank Vivek
– Shashank Vivek, Commented May 5, 2018 at 9:50

Shashank Vivek · Accepted Answer · 2018-05-05 10:04:21Z

1

Check this plunkr

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

answered May 5, 2018 at 10:04

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BlockchainProgrammer · Accepted Answer · 2018-05-05 10:13:04Z

0

Thank you very much. The solution was that I had to add the ng-controller in the tbody tag.

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

answered May 5, 2018 at 10:13

BlockchainProgrammer

2,0796 gold badges22 silver badges35 bronze badges

3 Comments

Shashank Vivek Over a year ago

but then why are you creating it as a directive ? Its a bad code that you are writing. You are mixing things up.

BlockchainProgrammer Over a year ago

I actually don't really know what I need a directive for? I tought its to connect the controller to the html... Can you explain this to me?

Shashank Vivek Over a year ago

Directives are for DOM manipulation. if you just need to show data, then go ng-include or if you are working on version > 1.5 and you need to reuse this , then go for components. Dont use same template for both directive and as a separate template associated with controller. Check AngularJS tutorials to get better understanding

Collectives™ on Stack Overflow

AngularJS read data from controller to table

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related