Пользовательский угловой фильтр строк Ганта

У меня есть диаграмма Ганта со столбцом таблицы «статус». Столбец может иметь несколько значений lik (активен, закрыт, работает, остановлен). Я хочу иметь возможность фильтровать по столбцу состояния проекта с несколькими значениями, например, иметь несколько флажков для каждого значения состояния (активно, закрыто и т. д.).

Я знаю, что вы можете привязать входной текст к фильтру строк, как это, но что, если мне нужно несколько значений в одном фильтре?

<input type="text" data-ng-model="options.filterRow" />
                                <div gantt="gantt" 
                                        data="data" 
                                        options="options"
                                        filter-row="{'status': options.filterRow}">
                                    <gantt-table columns="['model.status']"></gantt-table>
                                    <gantt-tree></gantt-tree>
                                    <gantt-groups></gantt-groups>
                                    <gantt-tooltips></gantt-tooltips>
                                    <gantt-bounds></gantt-bounds>
                                    <gantt-progress></gantt-progress>
                                    <gantt-sortable></gantt-sortable>
                                    <gantt-movable></gantt-movable>
                                    <gantt-draw-task></gantt-draw-task>
                                    <gantt-resize-sensor></gantt-resize-sensor>
                                </div>

filter angularjs gantt-chart
person adi.neag    schedule 27.07.2015    source источник
comment
Вам удалось решить вашу проблему? Я пытаюсь решить ту же проблему.   -  person HereHere    schedule 14.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение своей проблемы.

<select id="status" data-ng-model="filter1"><option .. /></select>
<select id="project" data-ng-model="filter2"><option .. /></select>

<div gantt="gantt" data="data" options="options" filter-row="filterFunction" current-date="column" current-date-value="getToday" column-width="100"
                            api="registerApi">
                            <gantt-table columns="['model.name', 'model.planned', 'model.delayed']"
                                headers="{'model.name': 'Project', 'model.planned': 'Planned [days]', 'model.delayed': 'Delayed [days]'}"
                                classes="{'model.name': 'gantt-project', 'model.planned' : 'gantt-column-days', 'model.delayed' : 'gantt-column-days'}"> </gantt-table>
                            <gantt-tree></gantt-tree>
                            <gantt-groups></gantt-groups>
                            <gantt-tooltips></gantt-tooltips>
                            <gantt-bounds></gantt-bounds>
                            <gantt-progress></gantt-progress>
                            <gantt-sortable></gantt-sortable>
                            <gantt-movable enabled="false"></gantt-movable>
                            <gantt-draw-task></gantt-draw-task>
                            <gantt-resize-sensor></gantt-resize-sensor>
                        </div>

Это происходит внутри углового контроллера.

    $scope.registerApi = function(api) {
        $scope.api = api;
    }

    // refresh grid on filter change
    for (i=0 ; i<filters.length; i++) {
        $scope.$watch('filter'+filters[i], function() {
            $scope.api.rows.refresh();
        })
    }

    $scope.filterFunction = function(row){
        var valid = true;
        //all filters implementations go here
        return valid;
    }
person adi.neag    schedule 02.09.2015