Simple AngularJS Lists

I like lists. No hang on – I LOVE lists! And luckily for me, creating lists of things in AngularJS is pretty straight forward, and incredibly useful to have in your code toolbox! In this post I’m going to run through some basic AngularJS list examples.

Let’s start with the very basics – AngularJS uses a directive called ng-repeat to create a list, and in your HTML template it would look something like this:

<ul>
  <li ng-repeat="item in [‘cabbage’, ‘umbrella’, ‘steam train’]">{{item}}</li>
</ul>

Viewing this code in your browser, it would look like this:

  • {{item}}

All very nice. You can filter your list by adding 2 things – first, add a textbox where a user can enter the text they want to filter the list by:

<input type="text" ng-model="filterText" placeholder="filter me!">

When you type something into this textbox, Angular’s $scope.filterText property will be populated with whatever you typed in the textbox. You can then use this property to filter your list by adding the following to your list code:

<ul>
  <li ng-repeat="item in [‘cabbage’, ‘umbrella’, ‘steam train’] | filter: filterText">{{item}}</li>
</ul>

Here it is in all it’s glory – type something in the box and be amazed at the filtering power we’ve just created!!:

  • {{item}}

Next, you can add a new item to this list by adding another textbox, giving it an AngularJS Model property, and pushing that property value to your array of items when the user clicks a button, like this:

  • {{item}}


Not bad eh?! Now we’re starting to get a little bit more complex with this example, so we have to introduce a basic controller. The controller code looks like this:

function AddToListController($scope) {
  $scope.items = [‘cabbage’, ‘umbrella’, ‘steam train’];
  $scope.AddItem = function() {
    $scope.items.push($scope.newItem);
  };
};

And our template markup now looks like this:

<div ng-controller="AddToListController">
  <ul>
    <li ng-repeat="item in items | filter: filterText">{{item}}</li>
  </ul>

  <input type="text" ng-model="newItem"> <button ng-click="AddItem()">Add Item</button>
</div>

We can also delete an item from this list, by using JavaScript’s “splice” method. We use the ng-click event to call a “RemoveItem” function, and pass it in the item we want to remove from the array. Test it out here:


Here’s the code for the controller:

function RemoveFromListController($scope) {
  $scope.items = [‘cabbage’, ‘umbrella’, ‘steam train’];

  $scope.RemoveItem = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };
};

And here’s the code for the template markup:

<div ng-controller="RemoveFromListController">
  <ul>
    <li ng-repeat="item in items | filter: filterText">{{item}}<a href="" ng-click="RemoveItem(item)">remove</a></li>
  </ul>
</div>

Finally we can order our list by using Angular’s ng-click directive to set a couple of parameters – the predicate (the thing we want to order the list by) and the direction in which we want to order the list. Here’s an example (click on the table header rows to order the contents):

Id Name
{{item.id}} {{item.name}}

Here’s the code for the controller:

<script>
  function OrderListController($scope) {
    $scope.items = [{‘id’: 1, ‘name’: ‘cabbage’ }, {‘id’: 2, ‘name’: ‘umbrella’ }, {‘id’: 3, ‘name’: ‘steam train’ }];
  };
</script>

And here’s the mark-up for the template:

<div ng-controller="OrderListController">
  <table>
    <tr>
      <th><a href="" ng-click="predicate = ‘id’; reverse = !reverse">Id</a></th>
      <th><a href="" ng-click="predicate = ‘name’; reverse = !reverse">Name</a></td>
    </tr>
    <tr ng-repeat="item in items | orderBy:predicate:reverse">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
    </tr>
  </table>
</div>

So there’s a few basic examples of how to use AngularJS lists – pretty simple once you know how!

Have fun 🙂

Posted in AngularJS, Code, Code samples Tagged with: ,
  • Dhana Raja

    provide the example for duallist in angular js
    with defaultly select the very first item in list

  • Awesome, just the post I was looking for. Thank you for this super simple explanation 🙂

About Maff

Maff Rigby

I'm a certified .Net, Umbraco and AngularJS freelance developer with over 15 years experience in the IT industry. As well as writing code I love to teach; I run a number of workshops and 1-1 coaching sessions on Angular JS and Umbraco, and share what I know and learn here!

I’m social (ish)

Connect with me on LinkedIn, follow me on Twitter, or fail to find me on Facebook.