NG-Repeat returns empty rows

Question

I'm trying to use ng-repeat to print out an array in an HTML list. The items of the list are showing correctly, but the rows are empty.

I tried different angularjs versions, jquery versions, but it did not work. If I use ng-bind it shows the data on the html page fine.

index.js

var app = angular.module('programsApp', []);

app.controller('programsController', function ($scope, $http) {
    $scope.programs = [1, 2, 3];
    console.log($scope.programs);
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Index</title>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script>
    <script src="../../index.js"></script>
</head>

<body ng-app="programsApp" ng-controller="programsController">

    <h1>Current Programs</h1>
    <ul>
        <li ng-repeat="x in programs">{{x}}</li>
    </ul>
</body>
</html>

The console prints the array fine from the index.js, and no errors

3) [1, 2, 3]0: 11: 22: 3length: 3__proto__: Array(0)

The html page shows only

Current Programs
*
*
*

so it shows three li but nothing in them

here is the code from inspect element

<ul>
<!-- ngRepeat: x in programs -->
<li ng-repeat="x in programs" class="ng-scope"></li>
<!-- end ngRepeat: x in programs -->
<li ng-repeat="x in programs" class="ng-scope"></li>
<!-- end ngRepeat: x in programs -->
<li ng-repeat="x in programs" class="ng-scope"></li>
<!-- end ngRepeat: x in programs -->
</ul>

Thank you.

UPDATE: the issue was in the express configurations, removed:

app.engine('html', engines.mustache);

and changed it to:

app.engine('html', require('ejs').renderFile);

solved the issue!

Thank you dacre-denny

Answer 1

This issue may be a side-effect of your <ul> list monumentally existing with no <li> elements prior to the first scope digest. Consider adding a check that only allows the <ul> list to render when the programs list is non-empty:

 angular .module('programsApp', []) .controller('programsController', function($scope) { $scope.programs = [1, 2, 3]; });

 <!DOCTYPE html> <html lang="en"> <head> <title>Index</title> <!-- Reverted to a slightly older version of angularjs --> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> </head> <body ng-app="programsApp" ng-controller="programsController"> <h1>Current Programs</h1> <!-- Consider adding a check to only render if programs list is non-empty --> <ul ng-if="programs.length > 0"> <li ng-repeat="item in programs"> <!-- Consider nesting the {{ item }} in an element within <li> --> <span>{{ item }}</span> </li> </ul> </body> </html>

Hope that helps!

NG-Repeat returns empty rows

Question

1 answers

solution1
2 ACCPTED 2019-02-10 21:27:26

NG-Repeat returns empty rows

Question

1 answers

solution1 2 ACCPTED 2019-02-10 21:27:26

solution1
2 ACCPTED 2019-02-10 21:27:26