Question

我需要帮助在ng-repeat内的不同对象上应用颜色。我有5个物体，我需要它们有不同的颜色。我知道我可以用ng-class做到这一点。但是，ng-repeat内部的对象来自通过主控制器的常量注入，并通过模态窗口传递。

这是模态html

<div class="modal-body">
  <ul ng-repeat="shift in item.shiftName">{{shift.shortcut}}
   <span>{{shift.title}}</span>
  </ul>
</div>

这是注入常数的主控制器

vm.namesOfShift = SHIFT_NAMES;
vm.openScheduleModal = function (dayOfWeek){
  let popupArgs = {
    selectedDay: dayOfWeek,
    shiftName: SHIFT_NAMES
  };
  let template = '/components/chamModal/views/shiftModal.html';
  ModalService.open(popupArgs, template, 'lg', function(result) {
    console.log(result);
  })
};

和常量

const SHIFT_NAMES = {
 MORNING: {
   title: 'Day Shift',
   shortcut: 'D',
   workHours: 8
  },
 NIGHT: {
   title: 'Night Shift',
   shortcut: 'N',
   workHours: 7.5
  },
 GRAVEYARD: {
   title: 'Graveyard Shift',
   shortcut: 'G',
   workHours: 10
 },
  OFF: {
    title: 'Off',
    shortcut: 'O',
    workHours: 24
 },
 LEAVE: {
   title: 'Leave',
   shortcut: 'L',
   workHours: 24}
 };

谢谢！

Answer 1

我们假设颜色将在SHIFT_NAMES常量中定义，如下所示：

const SHIFT_NAMES = {
 MORNING: {
   title: 'Day Shift',
   shortcut: 'D',
   workHours: 8,
   color: 'orange'
  },
 NIGHT: {
   title: 'Night Shift',
   shortcut: 'N',
   workHours: 7.5,
   color: 'black'
  },
 GRAVEYARD: {
   title: 'Graveyard Shift',
   shortcut: 'G',
   workHours: 10,
   color: 'darkblue'
 },
  OFF: {
    title: 'Off',
    shortcut: 'O',
    workHours: 24,
    color: 'red'
 },
 LEAVE: {
   title: 'Leave',
   shortcut: 'L',
   workHours: 24,
   color: 'darkgreen'
 }
};

您可以使用以下ng-repeat HTML代码访问它：

<div class="modal-body">
  <ul ng-repeat="shift in item.shiftName">{{shift.shortcut}}
   <span style="color: {{ shift.color }}">{{shift.title}}</span>
  </ul>
</div>

标题将根据SHIFT_NAMES对象中的颜色名称显示CSS颜色。

在ng-repeat内的不同对象上应用颜色

1 个答案: