Angular: Empty Fiddle

http://angularjs.org/

by Austin Anderson

HTML

<div ng-controller="Ctrl">
    <table>
        <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
        <tbody ng-repeat="actors in Users">            
            <tr ng-click="showDetails = ! showDetails">
                <td>{{actors.name}}</td>
                <td>{{actors.email}}</td>
            </tr>
            <tr ng-show="showDetails" style="background-color:rgba(0, 255, 255, 0.2)">
                <td colspan="2">
                    <p>birthday: {{actors.birthday}}</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

th {
    padding-right:50px;
}
td {
padding:5px;
border-bottom:solid;
border-top:solid;
}
table {
    border-right:solid;
    border-left:solid;
}

JavaScript

var myApp = angular.module('myApp', []);

function Ctrl($scope) {
    $scope.Users = [{
        name: "Joe",
        email: "[email protected]",
        birthday: "1/2/14"
    }, {
        name: "Susy",
        email: "[email protected]",
        birthday: "3/1/14"
    }, {
        name: "Frank",
        email: "[email protected]",
        birthday: "7/3/13"
    }];
}