Angular Table Filter Example 2

by jacobwsmith

HTML

<div ng-app ng-controller="Controller">
    <!--
    <div ng-repeat="category in categories">
        <input id="{{category.label}}" type='checkbox' ng-model='category.isChecked'></input>
        <label for="{{category.label}}" >{{category.label}}</label>
    </div>
-->
    <table class="table table-index">
        <thead>
            <tr>
                <th></th>
                <th>First</th>
                <th>Last</th>
                <th>Subscribed</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">&nbsp;</td>
            </tr>
        </tfoot>
        <tbody>
            <tr ng-repeat="result in results">
                <td>{{$index+1}}</td>
                <td>{{result.first}}</td>
                <td>{{result.last}}</td>
                <td>{{result.subscribed}}</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table.table {
    width: 100%;
    border-spacing: 0;
    font-size: 0.9em;
    margin: 0;
    border-collapse: inherit;
}
table.table thead tr th {
    line-height: 27px;
    border-left: 0;
    border-top: 0;
    width: auto;
    white-space: nowrap;
    padding:0 4px 0 4px;
    min-width: 111px;
}
table.table tbody tr td {
    padding:5px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;

}
table.table tfoot td {
    padding:5px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}
/* ========================================== */

/* .table-index 
*   - Sets the colors, borders and widths
*/

/* ========================================== */
 table.table-index thead tr {
    background: #eeeeee;
    /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(27%, #e7e7e7), color-stop(77%, #d3d3d3), color-stop(100%, #cdcdcd));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%, #e7e7e7 27%, #d3d3d3 77%, #cdcdcd 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cdcdcd', GradientType=0);
    /* IE6-9 */
}
table.table-index thead tr th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table.table-index tbody tr td {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table.table thead tr th:last-child, table.table tbody tr...

JavaScript

function Controller($scope) {

    // This comes from the server
    $scope.results = [
        {
            first: 'John',
            last: 'Smith',
            subscribed: true
        },
        {
            first: 'Joe',
            last: 'Brown',
            subscribed: true
        },
        {
            first: 'Larry',
            last: 'Bird',
            subscribed: false
        }
    ];
}