javascript - 在 Angular 中，芯片的动态颜色

Question

它需要以编程方式设置 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 数组更改时，我也无法调用绑定(bind)到该指令的函数。

我想做的事情可能吗？如果可以，我该怎么做？

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

要运行的函数如下所示:

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

但是当数据改变时我无法自动调用它!

Answer 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 状态，只是为了模拟您确实可以更改它并更改它们的背景。