Here is my problem - i can't implement ng-class='{activeTag: $chip.active}' to <md-chip></md-chip>. I've been tried to add this directive to <md-chips></md-chips> but it doesn't works(because of $chip not in current scope). I also can add this ng-class to md-chip-template but visually it's not what i want, i need backlight for everything in tag. Btw, <md-chip></md-chip> dynamically created in md-chips directive. Maybe someone faced with this problem or just know the solution. Thanks.
Here is my 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
}
];
});
My view
<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>
My css
.activeTag {
background: rgba(85, 107, 47, 0.66) !important;
color: white !important;
}
I may prefer to use custom directive, which add special class to your chip
.directive('myChip', function(){
return {
restrict: 'EA',
link: function(scope, elem, attrs) {
var myChip = elem.parent().parent();
myChip.addClass('_active');
scope.$watch(function(){
return scope.$chip.active
}, function(newVal){
if (newVal) {
myChip.addClass('_active');
} else {
myChip.removeClass('_active');
}
})
}
}
})
template
<md-chip-template ng-class="{'activeTag': $chip.active}" style="cursor: pointer;" my-chip>
styles
.md-chip._active {
background: rgba(85, 107, 47, 0.66) !important;
color: white !important;
}