Expandable list component for AngularJS (1.5)

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:

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.

One thought on “Expandable list component for AngularJS (1.5)

  1. Pingback: Expandable list component for AngularJS (1.5) – AngularJS News

Leave a Reply

Your email address will not be published. Required fields are marked *