如何在 Angular 中打印新对象的属性值？

Question

我正在开发一个列表应用程序，最初用户会看到一个输入和按钮。在输入中，用户输入新列表的名称，单击按钮后，会出现一个空列表，可以输入项目。添加新列表有效，adding/removing 列表项也是如此。但是列表的名称不会打印在页面上。目前没有任何高级 CSS，列表的名称应该全部显示在页面顶部，而不是直接显示在各自列表的正上方。

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

HTML:

    <div ng-app="notepadApp">
    <div ng-controller="notepadController as notepadCtrl">
        <header ng-repeat="list in notepadCtrl.lists">
            <form name="removeListForm" ng-submit="notepadCtrl.removeList($index)">
                <input type="submit" value="Remove list">
            </form>
            <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">
                        <span class="item-name-wrapper">{{item.name}}</span>
                    </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(newListName)">
            <input type="text" ng-model="notepadCtrl.list.name">
            <input type="submit" value="Add list">
        </form>
    </div>
</div>

Javascript:

(function(){

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

var shoppingLists = [

];

app.controller('notepadController', function(){
    var notepadCtrl = this;

    notepadCtrl.lists = shoppingLists;

    notepadCtrl.addList = function(newListName) {
        var newList = {
            name: newListName,
            items:[]
        };

        shoppingLists.push(newList);
    };

    notepadCtrl.removeList = function(index) {
        shoppingLists.splice(index, 1);
    };

});

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

您只想替换：

ng-submit="notepadCtrl.addList(newListName)"

与：

ng-submit="notepadCtrl.addList(notepadCtrl.list.name)"

如何在 Angular 中打印新对象的属性值？

How to print a new object's property value in Angular?

javascript

javascript-objects

angularjs

如何在 Angular 中打印新对象的 属性 值？

How to print a new object's property value in Angular?

javascript

javascript-objects

angularjs

如何在 Angular 中打印新对象的属性值？