ng-class on the angular material chips

Question

I want to create some backlight for the chips which have an 'active' flag based on my key value type for which I have made a ng-class="{activeTag: $chip.active}" but it doesn't works. How to add this ng-class on dynamically created md-chip.

View

<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

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

score 1 · Accepted Answer · answered Feb 06 '16 at 06:18

1

Your issue is likely the fact that you're trying to use $chip on the md-chips element. This is the container not the repeater. The content inside your template is what gets repeated.

I'm not too familiar with the MD components, but you're a level or two too far outside to access $chip

answered Feb 06 '16 at 06:18

Atticus

6,585
10
35
57

Thank you @Atticus, you're right. I need to find another way to implement this class to md-chip but it's another question – rkalita Feb 06 '16 at 06:25

score 0 · Answer 2 · answered Feb 06 '16 at 06:26

Try it this way. modify tour css to just .activetag and add ng-class to 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>

In this case we'll have this class only in `md-chip-template`. Visually it's not what i want, i need backlight for everything in tag — rkalita, Feb 06 '16 at 06:29

ng-class on the angular material chips

2 Answers2