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>

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

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

1 个答案: