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

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 = []线