Angular Example

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>

<h2>Without ng:switch</h2>
PEOPLE
<div ng:repeat="contact in contacts.people">
    <a href ng:show="contact.id" ng:click="getSheet()">{{contact|fullName}}</a>
    <span ng:show="!contact.id">{{contact|fullName}}</span>
</div>

COMPANIES
<div ng:repeat="contact in contacts.companies">
    <a href ng:click="getSheet()">{{contact.name}}</a>
</div>

<h2>With ng:switch</h2>
<div ng:repeat="(key, section) in contacts">
    {{key|uppercase}}
    <div ng:repeat="contact in section">
        <ng:switch on="key">
            <span ng:switch-when="people">
                <a href ng:show="contact.id" ng:click="getSheet()">{{contact|fullName}}</a>
                <span ng:show="!contact.id">{{contact|fullName}}</span>
            </span>
            <span ng:switch-when="companies">
                <a href ng:click="getSheet()">{{contact.name}}</a>
            </span>
        </ng:switch>
    </div>
</div>

CSS

h2 {
  margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
}

JavaScript

function MainCntl() {
    this.contacts = {
        people: [
            {lname: 'Last1', fname: 'First1', company: 'Corp1'},
            {id: 2, lname: 'Last2', fname: 'First2'},
            {id: 3, lname: 'Last3', fname: 'First3', company: 'Corp1'},
            {lname: 'Last4', fname: 'First4'}
        ],
        companies: [
            {name: 'Comp1'},
            {name: 'Comp2'}
        ]
    };
}

angular.filter('fullName', function(person) {
    var full = person.lname + ', ' + person.fname;
    return person.company ? full + ' at ' + person.company : full;
});