在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 数组更改时，我也无法调用绑定到指令的函数。

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

想法是，当 data.item[someIndex].active 在 $apply 上发生变化时，md-chip 的 class（不是 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 状态，只是为了模拟您确实可以更改它并将它们的背景更改为嗯。

在Angular，一个芯片的动态颜色

In Angular, dynamic color for a chip

javascript

angularjs

angular-directive

angular-material