AngularJS NG-Repeat 似乎不适用于具有单个对象的数组

Question

我发现了很多关于 ng-repeat 不能很好地处理对象的帖子，并希望数据是一个数组，但我的数据是一个数组，它恰好有一个对象（list2）。我得到 list1 很好，一切都很完美。根据我发现的所有内容， list2 应该可以工作。有人知道为什么没有吗？

来自我工厂的数据：

(function(){
var Factory = function(){

    var model =  {
        list1: [
            {
                id: "1_1",
                type: "header",
                headerText: "1_1 Header",
                secondaryHeaderText: "",
                paragraphText: "1_1 Paragraph",
                image: ""
            },
            {
                id: "1_2",
                type: "header",
                headerText: "Header 1_2",
                secondaryHeaderText: "",
                paragraphText: "1_2 Paragraph",
                image: ""
            },
            {
                id: "1_3",
                type: "header",
                headerText: "1_3 Header1",
                secondaryHeaderText: "1_3 Header2",
                paragraphText: "",
                image: ""
            }
        ],
        list2: [
            {
                id: "2_1",
                type: "link",
                headerText: "2_1 Header",
                paragraphText: "2_1 Paragraph",
                linkText: "2_1 Link Text",
                image: ""
            }
        ]
    };

    var factory = {};

    factory.getList1 = function(){
        return model.list1;
    };

    factory.getList2 = function(){
        return model.list2;
    };

    return factory;
};
angular.module('designApp').factory('Factory', Factory);
}());

HMTL

<div>
    <!--works perfectly fine -->
    <div ng-repeat="item in list1" ng-include="'app/partial/list1.html'"></div>
</div>

<div>
     <div ng-repeat="item in list2" ng-include="'app/partial/list2.html'"></div>
</div>

控制器

(function(){
var Controller = function($scope, Factory){
    $scope.list1 = [];
    $scope.list2 = [];


function init(){
    $scope.list1 = Factory.getList1();
    $scope.list2 = Factory.getList2();
}

init();
};

Controller.$inject = ['$scope', 'Factory'];

angular.module('designApp')
    .controller('Controller', Controller);
}());

这就是list2.html 中的全部内容。不渲染任何模型数据，而是渲染 html 标签，并且不会抛出任何错误。

<h2>{{list2.headerText}}</h2>
<p>{{list2.paragraphText}}</p>

提前感谢您的帮助！

Answer 1

你必须替换

<h2>{{list2.headerText}}</h2>
<p>{{list2.paragraphText}}</p>

通过

<h2>{{item.headerText}}</h2>
<p>{{item.paragraphText}}</p>

工作 plunkr： https://plnkr.co/edit/FC5KPpOl7gsmfva63veq?p=preview