Table sorting with name headings

by leonsaysHi

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<div ng-controller="SortableTableCtrl">
    <p> <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>

    </p>
    <hr/>
    <table class="friend">
        <tr>
            <th> <a href="" ng-click="order('parentname')">Name</a>
 <span class="sortorder" ng-show="predicate[0] === 'name'" ng-class="{reverse:reverse}"></span>

            </th>
            <th>Phone Number</th>
            <th> <a href="" ng-click="order('agemoy')">Age</a>
 <span class="sortorder" ng-show="predicate[0] === 'age'" ng-class="{reverse:reverse}"></span>

            </th>
        </tr>
        <tr consommations-row ng-repeat="row in childs | orderBy:predicate:reverse" row="row"></tr>
    </table>
</div>

CSS

th, td {
    padding: .5em 2em;
}
th {
    border-bottom: solid 1px #666
}
td.parent {
    background-color:#efefef;
}
.sortorder:after {
    content:'\25b2';
}
.sortorder.reverse:after {
    content:'\25bc';
}

JavaScript

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

app.directive('consommationsRow', function ($compile) {

    var getTemplate = function (is_parent) {
        var parentTemplate = '<td colspan="2" class="parent">{{row.parentname}}</td><td class="parent">{{row.agemoy}}</td>';
        var childTemplate = '<td>{{row.name}}</td><td>{{row.phone}}</td><td>{{row.age}}</td>';
        return (is_parent) ? parentTemplate : childTemplate;
    };
    var directiveDefinitionObject = {
        restrict: "A",
        compile: function (element, attrs) {
            return function (scope, element, attrs) {
                var tmpl = getTemplate(scope.row.is_parent);
                element.html(tmpl);
                $compile(element.contents())(scope);
            };
        },
        scope: {
            row: '='
        }
    };

    return directiveDefinitionObject;
});
app.controller('SortableTableCtrl', ['$scope', function ($scope) {
    $scope.childs = [{
        is_parent: true,
        group: '01',
        parentname: 'J',
        agemoy: 19
    }, {
        is_parent: true,
        group: '02',
        parentname: 'M',
        agemoy: 20
    }, {
        is_parent: true,
        group: '03',
        parentname: 'A',
        agemoy: 35
    }, {
        is_parent: true,
        group: '04',
        parentname: 'Z',
        agemoy: 19
    },
    // friends 
    {
        is_parent: false,
        group: '01',
        parentname: 'J',
        agemoy: 19,
        name: 'John',
        phone: '555-1212',
        age: 10
    }, {
        is_parent: false,
        group: '02',
        parentname: 'M',
        agemoy: 20,
        name: 'Mary',
        phone: '555-9876',
        age: 19
    }, {
        is_parent: false,
        group: '02',
        parentname: 'M',
        agemoy: 20,
        name: 'Mike',
        phone: '555-4321',
        age: 21
    }, {
        is_parent: false,
        group: '03',
        parentname: 'A',
        agemoy: 35,
        name: 'Adam',
        phone:...