NG-Repeat返回空行

时间:2019-02-10 21:11:55

标签: javascript html angularjs

我正在尝试使用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但其中什么也没有

这是来自inspect元素的代码

<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 :(得分:1)

此问题可能是您的import Foundation struct Vehicle { var id: UInt? var model: String var dateTimes: [CalendarInfo] //I have problem in this line } struct CalendarInfo { var id: UInt? var date: Date } let dateFormatter = DateFormatter() dateFormatter.dateFormat = "yyyy-MM-dd" let myCalendar = [CalendarInfo(id: 1, date: dateFormatter.date(from:"2019-02-10")!), CalendarInfo(id: 2, date: dateFormatter.date(from:"2019-02-15")!), CalendarInfo(id: 3, date: dateFormatter.date(from:"2019-02-20")!)] let myCar = Vehicle(id: 1, model: "Honda", dateTimes: myCalendar) myCar.dateTimes.count == 3 //true 列表永久存在的原因,该列表在第一个合并范围摘要之前没有任何<ul>元素。考虑添加仅在<li>列表为非空时才显示<ul>列表的检查:

programs
angular
  .module('programsApp', [])
  .controller('programsController', function($scope) {

    $scope.programs = [1, 2, 3];
  });

希望有帮助!