在芯片的Angular动态色彩中

eje211 发表于 Dev

eje211

它需要以编程方式在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（not md-chip-template！）的类别也会改变。当然，这是有可能的！

运行的函数如下所示：

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

但是，当数据更改时，我无法自动调用它！

约翰·史密斯

如果我正确理解了您的问题，那么您绝对可以使用指令来执行所需的操作，但是我同意这有点复杂。

我可以实现的方式：

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