of-class 在 angular material 个筹码上

Question

我想为具有 'active' 标志的芯片创建一些背光，该芯片基于我已为其创建 ng-class="{activeTag: $chip.active}" 的键值类型，但它不起作用。如何在动态创建的 md-chip.

上添加这个 ng-class

查看

<md-chips class="custom-chips selected" ng-model="tags" ng-class="{activeTag: $chip.active}" readonly="true">
  <md-chip-template style="cursor: pointer;" >
    <a ui-sref="">
      <strong>{{$chip.id}}</strong>
      <em>({{$chip.name}})</em>
    </a>
  </md-chip-template>
</md-chips>

控制器

controller('ChipsController', function($scope) {
    $scope.tags = [
      {
        id: 1,
        name: 'Pop',
        active: false
      },
      {
        id: 2,
        name: 'Rock',
        active: true
      },
      {
        id: 3,
        name: 'Reggie',
        active: false
      }
  ];

});

css

.activeTag md-chip{
  background: rgba(85, 107, 47, 0.66) !important;
  color: white !important; 
}

Plunker

Answer 1

您的问题可能是您试图在 md-chips 元素上使用 $chip。这是容器不是 中继器。模板中的内容是重复的内容。

我对 MD 组件不是很熟悉，但你的级别太远了，无法访问 $chip

Answer 2

这样试试。将 tour css 修改为 .activetag 并将 ng-class 添加到 md-chip-template

CSS:

.activeTag {
  background: rgba(85, 107, 47, 0.66) !important;
  color: white !important; 
}

html :

<md-chips class="custom-chips selected" ng-model="tags" readonly="true">
  <md-chip-template ng-class="{activeTag: $chip.active}" style="cursor: pointer;" >
    <a ui-sref="">
      <strong>{{$chip.id}}</strong>
      <em>({{$chip.name}})</em>
    </a>
  </md-chip-template>
</md-chips>

of-class 在 angular material 个筹码上

ng-class on the angular material chips

javascript

css

angularjs

angular-material

md-chip