javascript - 角材料芯片上的ng级

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

普朗克

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>