Question

我想为芯片创建一些背光，这些芯片具有基于我的键值类型的“活动”标志，我已经为其制作了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

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

我对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>

角度材料芯片上的ng级

2 个答案: