Question

我正在使用Angular创建列表应用。出于测试目的，我有两个预先创建的列表，每个列表都有预先创建的名称和项目。最终，用户最初将被呈现一个他们可以添加项目的空列表。然后他们可以为新项目添加新列表。到目前为止，我可以在现有列表中添加和删除项目，我可以添加新列表。但是我无法将新项目添加到新创建的列表中。我为行list.items.push(this.item);收到了“无法读取未定义的属性''错误”错误。我的猜测是，当我创建一个新列表时，没有添加items键，这就是为什么它未定义。我在创建新列表时尝试创建items密钥，但我无法使其工作。无论如何，这可能不是问题。

https://codepen.io/anon/pen/oWRQvQ

这是标记：

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

此脚本为：

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

Answer 1

您在两个地方创建一个新列表;一旦进入控制器初始化，再次进入addList函数。

在这两个地方，您需要一个items数组来匹配另一个列表使用的结构。在您创建新列表的两个位置，将初始化代码更改为this.list={items:[]};，以确保有items []进入。

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

1 个答案: