如何将多个对象绑定到集合？

Question

Angular Newb，尝试制作一个简单的清单应用程序并了解关系。 用户可以添加项目列表。 我的ItemList类具有标题，日期和项目集合。 我的项目类具有项目名称和数量。 如何多次使用ng-model输入框？

这是我的ItemList.cs

namespace BringIt.Models {
    public class ItemList {
        public int Id { get; set; }
        public string Title { get; set; }
        public DateTime EventDate { get; set; }
        public ICollection<Item> Items { get; set; }

    }
}

和Item.cs

namespace BringIt.Models {
    public class Item {
        public int Id { get; set; }
        public string ItemName { get; set; }
        public int ItemQty { get; set; }
        public string Person { get; set; }
        public ItemList ItemList { get; set; }
    }
}

和我的基本形式

<form ng-submit="controller.save()">
   Title <input ng-model="controller.itemList.title" />
   Item Name <input ng-model="controller.item.itemName"/>
   Quantity <input ng-model="controller.item.itemQty" />.

   //would like to do it again for more items
   Item Name 2 <input ng-model="controller.item.itemName" />
   Quantity 2 <input ng-model="controller.item.itemQty" />


    <button type="submit">Submit</button>
</form>

当我运行代码并在第一个模型中键入内容时，它会立即显示在第二个匹配的输入框中。 我最终希望允许用户添加任意​​数量的项目，并且馆藏只会不断增加。 另外，我可能会缺少的其他最佳实践建议也总是很有帮助的。

现在，我获得了以下代码，该代码几乎可以正常工作，但是在我填写第一个代码之后，并没有为更多对象添加新的空格。

 public addNew() {
        debugger;
        this.items = []
        var item = {itemName: "default name", itemQty: "default qty"}; // you can set default values here
        this.items.push(item);
    }

Answer 1

您可以使用ng-repeat进行迭代：

<div ng-repeat="item in items">
    Item Name {{$index}} <input ng-model="item.itemName" />
    Quantity {{$index}} <input ng-model="item.itemQty" />
</div>
<button ng-click="addNew()"></button>

新增项目：

$scope.items = [{
    itemName: 'existing item name',
    itemQty: 'existing item quantity'
}];

$scope.addNew = function () {
    var item = {}; // you can set default values here
    items.push(item);
};