JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div data-ng-controller="ctrl">
    <select data-ng-model="order.field">
        <option value="id">Id</option>
        <option value="name">Name</option>
        <option value="gender" selected>Gender</option>
    </select>
    <input type="checkbox" data-ng-model="order.reverse"/>
    {{order}}
    <ul>
        <li data-ng-repeat="user in data_set | orderBy:dynamicOrder:order.reverse">{{user.name}}</li>
    </ul>
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
    $scope.data_set = [{
        id: 1,
        name: 'Steven',
        gender: 'male'
    }, {
        id: 2,
        name: 'Mike',
        gender: 'male'
    }, {
        id: 3,
        name: 'Danielle',
        gender: 'female'
    }, {
        id: 4,
        name: 'Chris',
        gender: 'male'
    }, {
        id: 5,
        name: 'Christina',
        gender: 'female'
    }];
    
    var gender_order = {
        female: 1,
        male: 2
    };
    
    $scope.order = {
        field: 'gender',
        reverse: false
    };
    $scope.reverseOrder = false;
    
    $scope.dynamicOrder = function(user) {
        var order = 0;
        switch ($scope.order.field) {
            case 'gender':
                order = gender_order[user.gender];
                break;
            default:
                order = user[$scope.order.field];
        }
        return order;
    }
});