For several of my projects I required a list where input items could be dynamically added and removed.
Because i saw uses for this over and over i created a component which i’m sharing with you here.
The component ended up like the code below.
Where i used a template generation function in order to create the ul and li elements.
I’m using the angular.element function to create nodes as a method of preference.
As you can see the template function adds information such as class names from the attributes and also creates the item li tag with the ng-repeat needed to populate our list.
And after this it appends the footer li tag which should ideally contain the add item link/button.
So now we have our list, which we can use as such:
<mp-expandable-list items="main.model" universal-class="list-main" item-class="list-item" footer-class="list-footer">
As you can see there are bindings for both list and item.
- The list binding is for the controller for the expandable list.
- has two functions (add & remove) for adding and removing lines.
- has a flag called manipulatable which is true as long as the list may add/remove items.
- The item binding is for the individual items in the list.
Note that this is not a best practice, nor is it necessarily the best solution for you or your project.
It is just a component that may help you, or be the basis for something else.
You can play with this component on plunker.