AngularJS Table filter example

if you need filtering data in table more of one selected value maybe you have a problem, because more of standard AngularJs table filters not support that, we have filters for one input. Inspired by this problem I decided publish one of simple directive for that. If you want use you can download mvc project from github https://github.com/jasminkurtic/AngularJs-table-filter/tree/master/AutoSelectOption/AutoSelectOption Thank you for reading and testing.

by Jasmin Kurtić

HTML

<div ng-app="autoDrops" ng-controller="HomeController">
<div class="row">
    <div class="col-md-12">
        <h1>{{title}}</h1>
        <ng-Multiselect array-List="datas"></ng-Multiselect>
    </div>
</div>
</div>

CSS

.multiselect {
        width: 200px;
    }

    .selectBox {
        position: relative;
    }

        .selectBox select {
            width: 100%;
            font-weight: bold;
        }

    .overSelect {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
        .hideboxes {
        display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    overflow-y: auto;
    height: 150px;
    }

    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }

        #checkboxes label {
            display: block;
        }

            #checkboxes label:hover {
                background-color: #1e90ff;
            }

JavaScript

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

tableFilter.controller('HomeController', function ($scope) {
    $scope.title = "simple angularjs directive for table, multi select on column data";

    /* you can use factory for get datas
        $scope.datas = arrayFactory.arraysForDd;
        arrayFactory.getArreysForDb().then(function () { }, function () { alert("Error") });
    */
    //without factory
    $scope.datas = [
        { "data_id": 0, "id": 35, "name": "Option-1" },
        { "data_id": 30, "id": 31, "name": "Option-1-1" },
        { "data_id": 0, "id": 35, "name": "Option-4" },
        { "data_id": 30, "id": 31, "name": "Option-1-3" }
    ];



})

tableFilter.controller('filterController', function ($scope, $q) {
    $scope.filters = [];
    $scope.headFilter = {};
    $scope.headFilter = ""
    $scope.table = {};
    var deferred = $q.defer();
    function pushFilter(array) {
        var columnNames = [];
        var rows = Object.keys(array[0]);
        for (var i = 0; i < rows.length; i++) {
            if (rows[i] != '$$hashKey') {
                columnNames.push(rows[i]);
            }
        }
        //{ "data_id": 0, "id": 35, "name": "Option-1" },
        var table = {};
        table.columnNames = [];
        table.rows = [];
        for (var i = 0; i < array.length; i++) {
            for (var j = 0; j < columnNames.length; j++) {
                if (table.columnNames.indexOf(columnNames[j]) == -1) {
                    var column = {};
                    column.name = columnNames[j];
                    column.datas = [];
                    var data = {};
                    data.columnName = columnNames[j];
                    data.value = array[i][columnNames[j]];
                    data.check = true;
                    data.id = i;
                    var d = {};
                    d.id = i;
                    d.show = true;
                    data.ids = [];
                    data.ids.push(d);
                   ...