AngularJS radio buttons on ngRepeat

Bar baz

by Edgar Martinez

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<form name="myForm" ng-controller="MyCtrl">
    <h4>Primary: {{GetPrimaryContact().email}}</h4>
<div ng-repeat="contact in ContactsList">
 <button>
  {{contact.name}}
 </button><br/>
</div>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Primary</th>
                <th>Technical</th>
                <th>Sales</th>
                <th>Billing</th>
                <th>Emergency</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in ContactsList">
                <td>{{contact.name}}</td>
                <td>{{contact.email}}</td>
                <td ng-class="{'success':primaryContact.email == contact.email}">
                    <input type="radio" name="radio-primary" ng-model="primaryContact.email" ng-value="contact.email"/>
                </td>
                <td ng-class="{'success':contact.isTechnical}">
                    <input type="checkbox" ng-model="contact.isTechnical" />
                </td>
                <td ng-class="{'success':contact.isSales}">
                    <input type="checkbox" ng-model="contact.isSales" />
                </td>
                <td ng-class="{'success':contact.isBilling}">
                    <input type="checkbox" ng-model="contact.isBilling" />
                </td>
                <td ng-class="{'success':contact.isEmergency}">
                    <input type="checkbox" ng-model="contact.isEmergency" />
                </td>
            </tr>
        </tbody>
    </table>
</form>

CSS

table, table td, table th {
    border-collapse:collapse;
    border: 1px solid #DDD;
}
table tbody tr:nth-child(odd){
    background-color: #EEE;
}
.success {
    background-color: #C1F5AC;
}

JavaScript

function MyCtrl($scope) {
    $scope.primaryContact = {
        email:"[email protected]"
    };
    $scope.ContactsList = [{
        name: "John Doe",
        email: "[email protected]",
        isPrimary: false,
        isTechnical: true,
        isSales: false,
        isBilling: true,
        isEmergency: true
    }, {
        name: "Jane Doe",
        email: "[email protected]",
        isPrimary: true,
        isTechnical: false,
        isSales: false,
        isBilling: true,
        isEmergency: true
    }, {
        name: "Bill Murray",
        email: "[email protected]",
        isPrimary: false,
        isTechnical: false,
        isSales: true,
        isBilling: false,
        isEmergency: false
    }, {
        name: "Someone Dude",
        email: "[email protected]",
        isPrimary: false,
        isTechnical: false,
        isSales: false,
        isBilling: false,
        isEmergency: true
    }];

    $scope.GetPrimaryContact = function () {
        return _.findWhere($scope.ContactsList, {
            isPrimary: true
        });
    };
}