CODEWITHSUNDEEP
javascripthtmlangularjs
A.J
A.J

Reputation: 43

NG-Repeat returns empty rows

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

Upvotes: 1

Views: 390

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30370

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!

Upvotes: 2

Related Questions