Question

我正在尝试构建一个非常简单的清单应用程序。我不能完全理解这一点。当用户想要添加项目时，他应该单击按钮添加项目。然后应该有项目名称和数量的输入框。这部分可以工作，但如果用户然后点击按钮添加另一个项目，它应该给他更多的输入框，这是我无法工作的。使用Angular和typescript，而不是使用$ scope。

这是我的控制器：

   export class CreateItemListController {
        public itemList;
        public item;
        public items = [];

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

HTML

<form>
    <div>
   Title <input ng-model="controller.itemList.title" />

    <div ng-repeat="item in controller.items">
        Item Name <input ng-model="controller.item.itemName" />
        Quantity <input ng-model="controller.item.itemQty" />
    </div>
    <button ng-click="controller.addNew()">Add New Item</button>
</div>
       <button ng-click="controller.save()" type="submit">Submit</button>
</form>

和模型

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


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

Answer 1

我认为，问题是你再次在addNew（）函数中初始化你的数组。将功能更改为

public addNew() {
        var item = {itemName: "default name", itemQty: "default qty"};
        this.items.push(item);
    }

注意我已删除了this.items = []行

如何在按钮点击时动态添加更多输入框？

1 个答案: