在 Angular 中，芯片的动态颜色

Posted 2023-02-22

【中文标题】在 Angular 中，芯片的动态颜色

【英文标题】：In Angular, dynamic color for a chip

【发布时间】：2016-09-18 09:16:53

【问题描述】：

它需要在Angular Material中以编程方式设置芯片的颜色。

假设每个芯片显示一个项目，定义为：

  name: 'the name',
  active: true

如果芯片没有激活，它应该是灰色的，如果它是红色的。显而易见的方法是：

<md-chips ng-model="data.items" readonly="true">
  <md-chip-template ng-class="$chip.active ? 'active' : ''">
    $chip.name
  </md-chip-template>
</md-chips>

但这行不通。它只会为芯片的内部着色。它实际上并没有修改md-chip 标签，只是修改了其中的md-chip-template。

那么为什么不使用静态芯片呢？我可以这样做：

<md-chips ng-model="data.items" readonly="true">
  <md-chip ng-repeat="chip in data.items" ng-class="$chip.active ? 'active' : ''">
    chip.name
  </md-chip>
</md-chips>

但这也行不通。您不能在ng-chips 中使用ng-repeat。它只会删除您尝试重复的所有内容。

所以，我想到了这个主意。使用将在更改时更新其元素的父级的指令！

<md-chips ng-model="data.items" readonly="true">
  <md-chip-template ng-class="$chip.active ? 'active' : ''" chip-style>
    $chip.name
  </md-chip-template>
</md-chips>

指令 chipStyle 应该在其模型更改时查找带有标签 md-chip 的父代，并复制到它是否具有 active 样式。

这是个好主意吗？即使是这样，当data.items 数组发生变化时，我也无法调用绑定到指令的函数。

我正在尝试做的事情可能吗？如果是这样，我该怎么做？

这个想法是，当data.item[someIndex].active 在$apply 上发生变化时，md-chip（不是md-chip-template！）的类也会发生变化。当然，这一定是可能的！

要运行的函数如下所示：

if (element.hasClass('active')) 
  element.parents('md-chip').addClass('active');
 else 
  element.parents('md-chip').removeClass('active');

但是我不能在数据变化的时候自动调用它！

【参考方案1】：

如果我正确理解了你的问题，那么你绝对可以用指令做你想做的事，但我同意这有点复杂。

我可以实现的方式：

HTML

<md-chips ng-model="chips" readonly="true">
  <md-chip-template is-active active="$chip.active">
    <b>$chip.name</b>
  </md-chip-template>
</md-chips>

isActive 指令

app.directive('isActive', function() 
    var directive = 
        restrict: 'A',
        link: link
    ;

    function link(scope, el, attrs) 
      attrs.$observe('active', function(val) 
        if (val === 'true')
          el.parent().parent().addClass('active');
        else
          el.parent().parent().removeClass('active');
      );
    

    return directive;
);

Codepen demo：我正在使用$timeout 更改前2 个芯片的active 状态，只是为了模拟您确实可以更改它并更改它们的背景。

【讨论】：

我不知道$observe！这很有意义。谢谢！ （一般来说，$observe 很有用。）