Chapter 4
<li>{{item.description}}</li>
<!-- and end it here -->
</ul>A new version of AngularJS (1.2.x) is going to extend the basic syntax of the
ngRepeat directive to allow more flexibility in choosing DOM elements to be iterated
over. In the future it will be possible to write:
<ul>
<li ng-repeat-start="item in items">
<strong>{{item.name}}</strong>
</li>
<li ng-repeat-end>{{item.description}}</li>
</ul>By using the ng-repeat-start and the ng-repeat-end attributes it will be possible
to indicate a group of sibling DOM elements to be iterated over.
Elements and attributes that can't be modified at runtime
Since AngularJS operates on the live DOM tree in a browser it can only do as
much as browsers permit. It turns out that there are some corner cases where some
browsers disallow any changes to elements and their attributes, after those elements
were put in the DOM tree.
To see the consequences of those restrictions in practice let's consider a rather
common use case of specifying an input element's type attribute dynamically. Many
users have tried (and failed!) to write code along those lines:
<input type="{{myinput.type}}" ng-model="myobject[myinput.model]">The trouble is that some browsers (yes! you've guessed it: Internet Explorer!)
won't change type of a created input. Those browsers see {{myinput.type}}
(un-evaluated) as an input type, and since it is unknown it is interpreted as
type="text".
There are several approaches to tackling the problem described earlier, but we
need to learn more about AngularJS custom directives before we can discuss those
solutions. Chapter 9, Building Advanced Directives, offers one of the possible solutions.
The other simple approach is to use the built-in ng-include directive to encapsulate
static templates for different input types:
<ng-include src="'input'+myinput.type+'.html'"></ng-include>