Mastering Web Application

Chapter 4

Iterating over objects' properties, while being supported, has limitations. The main
issue is that we can't control iteration order.

If you care about order in which properties are iterated over you should

sort those properties in a controller and put sorted items in an array.

ngRepeat patterns

This section will walk us through some of the commonly used presentation patterns
and ways of implementing them with AngularJS. In particular we are going to look
into lists with details and altering classes on elements being part of a list.

Lists and details

It is a common use case to display a list whose items expand to show additional
details, when they are clicked. There are two variants of this pattern: either only one
element can be expanded or alternatively several expended elements are allowed.
Here is the screenshot illustrating this particular UI design:

Displaying only one row with details

The requirement of having only one element expanded can be easily covered with
the following code:

<table class="table table-bordered" ng-

controller="ListAndOneDetailCtrl">

<tbody ng-repeat="user in users" ng-click="selectUser(user)" ng-

switch on="isSelected(user)">

<tr>

<td>{{user.name}}</td>

<td>{{user.email}}</td>

</tr>