Javascript 如何将对象添加到另一个动态创建的对象中的关键点？

我正在使用Angular创建一个列表应用程序。出于测试目的，我有两个预先创建的列表，每个列表都有预先创建的名称和项目。最终，用户最初会看到一个空列表，他们可以向其中添加项目。然后他们可以为新项目添加新列表。到目前为止，我已经能够在现有列表中添加和删除项目，并且可以添加新列表。但我无法将新项目添加到新创建的列表中。我得到一个行

list.items.push（this.item）的“无法读取未定义属性'push'的错误”。我的猜测是，当我创建一个新列表时，没有添加
项
键，这就是它未定义的原因。当我创建一个新列表时，我尝试创建一个
items
键，但无法使其工作。无论如何，这可能不是问题所在


以下是标记：

<div ng-app="notepadApp">
    <div ng-controller="notepadController as notepadCtrl">
        <header ng-repeat="list in notepadCtrl.lists">
            <div>Delete list</div>
            <h1>{{list.name}}</h1>
        </header>
        <div ng-repeat="list in notepadCtrl.lists" class="shoppingList" ng-controller="ItemController as itemCtrl">
            <ul>
                <li ng-repeat="item in list.items">

                    <label>
                        <input type="checkbox" ng-model="item.checked">
                        {{item.name}}
                    </label>
                    <form name="itemForm" ng-submit="itemCtrl.removeItem(list, $index)">
                        <input type="submit" value="remove">
                    </form>

                </li>
            </ul>
            <form name="itemForm" ng-submit="itemCtrl.addItem(list)">
                <input type="text" ng-model="itemCtrl.item.name">
                <input type="submit" value="Add item">
            </form>
        </div>

        <form name="addListForm" ng-submit="notepadCtrl.addList(lists)">
            <input type="text" ng-model="notepadCtrl.list.name">
            <input type="submit" value="Add list">
        </form>
    </div>
</div>

在两个位置创建一个新列表；一次在控制器初始化时，另一次在
addList
功能中

在这两个位置，您都需要一个
items
数组来匹配另一个列表所使用的结构。在创建新列表的两个位置，将初始化代码更改为
this.list={items:[]}
以确保有一个
items[]
要推入。
确实会将新项目添加到新列表中，但当我创建一个新列表时，它的名称不会以“groceries”和“cvs”相同的方式出现在顶部。
(function(){

var app = angular.module('notepadApp', []);

var shoppingLists = [
    {
        name: 'groceries',
        items: [
            {
                name: 'milk',
                checked: false
            },
            {
                name: 'eggs',
                checked: false
            }
        ]
    },
    {
        name: 'cvs',
        items: [
            {
                name: 'pills',
                checked: false
            },
            {
                name: 'cotton balls',
                checked: false
            },
            {
                name: 'razors',
                checked: false
            }
        ]
    }
];


app.controller('notepadController', function(){
    this.lists = shoppingLists;
    this.list = {};

    this.addList = function() {
        this.lists.push(this.list);
        this.list = {};
    };

});

app.controller('ItemController', function(){
    this.item = {};

    this.addItem = function(list){
        list.items.push(this.item);
        this.item = {};
    };

    this.removeItem = function(list, index) {
        list.items.splice(index, 1);
    };
});
})();