ng-repeat not working AngularJS

Question

Both the ng-repeat's are not working. But just showing {{ rows }} does work. So the communication between the template and the controller is working.

What's wrong with my ng-repeat?

I already searched the other posts on this topic, but on all of them the error was in the controller. But even repeating an I in an array defined in the HTML template isn't working. And the Rows are showing up when not looping.

<div ng-controller="OrderNewCtrl">

  <h1> {{ rows }}</h1>
  <div ng-repeat="i in [42, 42, 43, 43]">
    {{ i }}
    <p>test</p>
  </div>

  <div class="form">
    <form>
      <table>
        <tbody>
          <tr ng-repeat="rowContent in rows">
            {{rowContent}}
          </tr>
        </tbody>
      </table>
      <button class="btn btn-primary btn-functionality btn-success btn-add" ng-click="addRow">+</button>
    </form>
  </div>
</div>

'use strict';

angular.module('myApp.orderNew', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/order/new', {
    templateUrl: 'order-new/order-new.template.html',
    controller: 'OrderNewCtrl'
  });
}])

.controller('OrderNewCtrl', function($scope) {
  $scope.rows = ['Row 1', 'Row 2', 'Row 3', 'Row 4'];
  $scope.counter = 4;
  $scope.test = "hi";

  $scope.addRow = function() {
    $scope.rows.push('Row ' + $scope.counter);
    $scope.counter++;
  }
});

lin · Accepted Answer · 2017-04-04 16:00:19Z

1

Both are working fine, just use the (key, value) separator on your index based arrays.

<div ng-controller="OrderNewCtrl">
  <h1> {{ rows }}</h1>
  <div ng-repeat="(key, value) in [42, 42, 43, 43]">
    {{ key }}
    <p>test</p>
  </div>
  <div class="form">
    <form>
      <table>
        <tbody>
          <tr ng-repeat="(rowContent, value) in rows">
            {{rowContent}}
          </tr>
        </tbody>
      </table>
      <button class="btn btn-primary btn-functionality btn-success btn-add" ng-click="addRow">+</button>
    </form>
  </div>
</div>

answered Apr 4, 2017 at 16:00

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

Comments

Amit Malik · Accepted Answer · 2017-04-04 16:09:28Z

1

Try using track by For example:

<div ng-repeat="n in ['Row 1', 'Row 2', 'Row 3', 'Row 4'] track by $index">
    {{n}}
</div>

Working Demo

answered Apr 4, 2017 at 16:09

Amit Malik

1948 bronze badges

Comments

ajai Jothi · Accepted Answer · 2017-04-04 16:14:48Z

1

Problem with your html - you are not using td inside tr

<tr ng-repeat="rowContent in rows track by $index"> <td>{{rowContent}}</td> </tr>
you have duplicate values in the list - use track by $index in ng-repeat

ng-repeat="i in [42, 42, 43, 43] track by $index"

ng-repeat="rowContent in rows track by $index"

answered Apr 4, 2017 at 16:14

ajai Jothi

2,3041 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

ng-repeat not working AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related