Определение цвета задачи для каждой строки в 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'
        },
    };
}
})();

gradient angularjs gantt-chart
person C M    schedule 26.05.2016    source источник
comment
можете ли вы предоставить код html/js вашего случая?   -  person shershen    schedule 26.05.2016
comment
@shershen см. редактировать   -  person C M    schedule 27.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

//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;
    }
  })
})
person shershen    schedule 27.05.2016
comment
Спасибо большое за идею, попробую и расскажу что получилось - person C M; 28.05.2016
comment
Итак, моя проблема заключается в том, что на самом деле происходит перехват события перемещения, в документации говорится, что api.tasks.on.moveEnd(task) должен сообщать мне, когда задача перемещается, но должен ли я делать это для всех задач? - person C M; 29.05.2016