I am currently working on developing a checklist application, and I'm facing a challenge with the functionality. The user should be able to add items by clicking a button which opens input boxes for item name and quantity. While this initial part works fine, I'm struggling to make it so that when the user wants to add another item, more input boxes are dynamically generated. I am using Angular and typescript without utilizing $scope.
Below is my controller:
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>
Models:
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; }
}
}