NG-Repeat возвращает пустые строки - PullRequest
Новая
       0

NG-Repeat возвращает пустые строки

0 голосов
/ 11 февраля 2019

Я пытаюсь использовать ng-repeat для распечатки массива в списке HTML.Элементы списка отображаются правильно, но строки пусты.

Я пробовал разные версии angularjs, версии jquery, но это не сработало.Если я использую ng-bind, он хорошо показывает данные на html-странице.

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>

Консоль печатаетмассив массива из index.js, без ошибок 

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

На html-странице отображаются только 

Current Programs
*
*
*

, поэтому он показывает три li, но ничего в них

здесьэто код из элемента проверки 

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

Спасибо.

ОБНОВЛЕНИЕ: проблема была в экспресс-конфигурации, устранена: 

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

и измененаэто: 

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

решил проблему!

Спасибо dacre-denny

1 Ответ

0 голосов
/ 11 февраля 2019

Эта проблема может быть побочным эффектом вашего списка <ul>, который монументально существует без элементов <li> до первого обзора области.Попробуйте добавить проверку, которая позволяет отображать список <ul>, только если список programs не пуст: 

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>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...