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-repeat内使用ng-chips。它只会删除您尝试重复的所有内容。

所以，我接受了这个想法。使用一个指令，在更改时更新其元素的父级！

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

但是当数据发生变化时我无法自动调用它！

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状态，只是为了模仿您确实可以更改它并将其背景更改为好。

在角度，动态颜色的芯片

1 个答案: