Как динамически добавлять дополнительные поля ввода при нажатии кнопки?

Question

Я пытаюсь создать довольно простое приложение контрольного списка. Я просто не могу понять это правильно. Когда пользователь хочет добавить элемент, он должен нажать кнопку, чтобы добавить элемент. Затем должны быть поля ввода для имени и количества элементов. Эта часть работает, но если пользователь затем нажимает кнопку, чтобы добавить другой элемент, он должен предоставить ему больше полей ввода, и это то, что я не могу заставить работать. Использование углового и машинописного текста, не использующего $ 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 = [] линии