角材料芯片上的ng级答案

【问题标题】：ng-class on the angular material chips角材料芯片上的ng级
【发布时间】：2016-05-16 05:45:35
【问题描述】：

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

【问题讨论】：

标签： javascript css angularjs angular-material md-chip

【解决方案1】：

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

我对 MD 组件不太熟悉，但您的级别太高了，无法访问$chip

【讨论】：

谢谢@Atticus，你是对的。我需要找到另一种方法来实现这个类到 md-chip 但这是另一个问题

【解决方案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>

【讨论】：

在这种情况下，我们将仅在 md-chip-template 中提供此类。从视觉上看，这不是我想要的，我需要为标签中的所有内容提供背光