Question

Angular Newb，试图创建一个简单的清单应用程序并理解关系。用户可以添加项目列表。我的ItemList类有一个标题，日期和一组项目。我的Item类有项目名称和数量。如何多次使用带有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);
};

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

1 个答案: