NG-Repeat返回空行

我正在尝试使用 ng-repeat 打印出 HTML 列表中的数组。列表中的项目显示正确，但行为空。

我尝试了不同的angularjs版本，jquery版本，但它不起作用。如果我使用 ng-bind 它会在 html 页面上显示数据。

索引.js

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

索引.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>

控制台从索引.js中打印数组，并且没有错误

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

网页仅显示

Current Programs
*
*
*

所以它显示了三个里，但其中什么都没有

这是来自检查元素的代码

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

解决了问题！

谢谢你敢丹尼

此问题

可能是您的<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>

希望对您有所帮助！

相关内容

最新更新

热门标签：