The goal of this is to create a simple way to add and remove items from a list in Angular. You can see the finished demo on plnkr. Here is the user interaction:
To start off, I have a new controller in my Angular app for this demo. It’s called demoController.
Then in my html, I have this new controller with some scaffolding of what I want the ui to look like.
Then a way to add a new item by getting the text in the input and pushing that to the items scope:
Lastly, removing an item from items. Angular provides an $index that we can use to remove a specific item:
That’s a simple way to add and remove items. See the demo on plnkr.
Right now when you add a new item to the list, the input keeps the input that was added. Not a good ui. To remove the input when it is submitted, simply make the input scope emtpy with $scope.input = ''; in $scope.add: