How to populate a table with AngularJS

Question

I have a table:

<h4>Table of Results</h4>
<table class="table table-striped">
    <thead>
       <tr>
          <th scope="col">Name</th>
          <th scope="col">Value</th>
          <th scope="col">Sub-Name</th>
       </tr>
     </thead>
     <tbody>
       <tr ng-repeat="object in results>
          <td>{{object.field1}}</td>
          <td>{{object.field2}}</td>
          <td>{{object.field3}}</td>
       </tr>
     </tbody>
</table>

And I have a controller:

angular.module('app', [])

.controller("Ctrl",['$scope', function ($scope) { 

 $scope.BtnIndex;
 $scope.results = [];

 $scope.selectBtn = function (index, model1, model2) {
     if (index == $scope.BtnIndex)
         $scope.BtnIndex = -1;
     else {
         $scope.newItem = {
             field1 : model2.name,
             field2 : model2.val,
             field3 : model1.name
         }
         $scope.results.push($scope.newItem);
      }
};

I can't work out why the table is not populating with the data. I have checked the console and it is showing the data, as I expected, but it just isn't populating the table.

I'm expecting the answer to be right in front of me, but I can't see it.

global results = [] declarated in controller is different than local $scope.results. Please check console one more time. — Krzysztof Safjanowski
– Krzysztof Safjanowski, Commented Apr 5, 2016 at 13:39

Richard Hamilton · Accepted Answer · 2016-04-05 13:45:22Z

1

You are not binding the results variable to the scope

Please change

results = [];

to this

$scope.results = [];

Here's the official information from Angular themselves

Scope is the glue between application controller and the view. During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.

edited Apr 5, 2016 at 13:45

answered Apr 5, 2016 at 13:37

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

3 Comments

camden_kid Over a year ago

I imagine $scope.results.push($scope.newItem); would give errors if that was the case. Maybe a typo in the question?

TJS UK Over a year ago

Sorry Richard, that's a typo. I will update the question.

TJS UK Over a year ago

Hi Richard, you were right to get me to check the typo. A cup of coffee and fresher eyes made me realise that the answer was that the table was outside the scope of the controller. I would not have noticed that if it wasn't for your attention to detail. Thanks.

camden_kid · Accepted Answer · 2016-04-05 13:56:48Z

This works - Plunker

JS

$scope.results = [];

$scope.selectBtn = function (index, model1, model2) {
   if (index == $scope.BtnIndex)
       $scope.BtnIndex = -1;
   else {
       $scope.newItem = {
           field1 : index,
           field2 : model1,
           field3 : model2
       }
       $scope.results.push($scope.newItem);
    }
 }

Markup

  <body ng-controller="MainCtrl">
    <button ng-click='selectBtn("hello", "world", "today")'>Press me</button>
    <h4>Table of Results</h4>
    <table class="table table-striped">
        <thead>
           <tr>
              <th scope="col">Name</th>
              <th scope="col">Value</th>
              <th scope="col">Sub-Name</th>
           </tr>
         </thead>
         <tbody>
           <tr ng-repeat="object in results">
              <td>{{object.field1}}</td>
              <td>{{object.field2}}</td>
              <td>{{object.field3}}</td>
           </tr>
         </tbody>
    </table>
</body>

It's not possible to see how you are calling $scope.selectBtn in your markup so I've created a simple example from your question.

Collectives™ on Stack Overflow

How to populate a table with AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related