Определение цвета задачи для каждой строки в Angular-Gantt

Я использую angular-gantt для представления ряда задач, и я хотел бы иметь задачи определенной строки с определенным цветом.
Для этого я добавил модули Gantt-movable и Gant-draw-task.

Я знаю, как исправить цвет задачи в начале, но не как изменить его в соответствии с строкой, в которой находится задача.

Спасибо за любые подсказки.

РЕДАКТИРОВАТЬ:

Сочетание клавиш ctrl

    (function () {
'use strict';

angular.module('Dashboard.pages.devices.planning')
    .controller('PlanningGanttCtrl', PlanningGanttCtrl);

function PlanningGanttCtrl($scope,$sessionStorage) {


    $scope.data=$sessionStorage.planning[$scope.dayNumber];


    $scope.headersFormats = {
        day: 'D',
        hour: 'H',
        minute:'HH:mm'
    };


    $scope.data = [
        {name: '20°C', tasks: [
            {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 0, 0, 0), to: new Date(2013, 10, 5, 6, 0, 0) }
        ]},
        {name: '19°C', tasks: [
            {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 7, 0, 0), to: new Date(2013, 10, 5, 10, 0, 0)}
        ]},
        {name: '18°C', tasks: [
            {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 10, 0, 0), to: new Date(2013, 10, 5, 12, 0, 0)}
        ]},
        {name: '17°C', tasks: [
            {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 12, 0, 0), to: new Date(2013, 10, 5, 15, 0, 0)}
        ]}
    ];

    $scope.drawTaskFactory = function() {
        var newTask = {
            id: 5,
            name: 'New Task'
            // Other properties
        };

        return newTask;
    }
}
})();

Формат html

<div gantt data=data headers="['hour']" headers-format="headersFormats" task-out-of-range="expand" expand-to-fit="true" >
    <gantt-table></gantt-table>
    <gantt-movable></gantt-movable>
    <gantt-tooltips></gantt-tooltips>
    <gantt-resize-sensor></gantt-resize-sensor>
    <gantt-draw-task enabled="true" task-factory="drawTaskFactory" move-threshold="4"></gantt-draw-task>
  <gantt-overlap enabled="false" global="true"></gantt-overlap>
</div>

И директива, даже если я не считаю, что это полезно,

(function () {
'use strict';

angular.module('Dashboard.pages.devices.planning')
    .directive('planningGantt', planningGantt);

/** @ngInject */
function planningGantt() {
    return {
        restrict: 'E',
        controller: 'PlanningGanttCtrl',
        templateUrl: 'app/pages/devices/planning/planningGantt/planningGantt.html',
        scope: {
            dayNumber: '=info'
        },
    };
}
})();

1 ответ

  1. Известен ли вам цвет и другие данные текущего столбца, в котором находится задача?
    Затем можно использовать систему событий для изменения свойства цвета задачи при ее перемещении. Это может выглядеть примерно так:

    //in single task directive's controller
    data = {
      id://column id
      color: //column color
    };
    $scope.$emit('taskChangeEvt', data);
    
    //in PlanningGanttCtrl
    $scope.$on('taskChangeEvt', function(event, eventData){
    
      $scope.data.forEach(function(item){
        if(item.id == eventData.id){ //find task that fit that column by ID
        //update that task's colour
        item.color = eventData.color;
        }
      })
    })