爲Angular-Gantt中的每一行定義任務顏色

Question

我使用angular-gantt來表示一系列的任務，我想要使用特定顏色的特定行的任務。 要添加到此我已添加模塊甘特圖可移動和繪圖任務。

我知道如何解決任務的顏色在開始，但不是如何根據其任務是在該行修改。

謝謝你的任何指針。

編輯：

按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' 
     }, 
    }; 
} 
})(); 

Answer 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; 
    } 
    }) 
})