javascriptangularjsangularjs-material

How do I use an expression with md-colors directive?

I am using AngularJS Material and I would like to apply md-colors="" values based on an expression the same way an expression can be used with ng-class="". I have not been able to get this working.

Here's an example :

<md-button md-colors="{background:'accent-900-0.43' : mode == 'development'}" ng-click="setMode('development')">
development
</md-button>

The desired output is that the md-button will take on the accent-900 background color if the condition mode=='development' is true.

Can md-colors be used this way?

Solution

  • you can use ternary operation inside md-color to assign styles

    <md-button md-colors="mode == 'development' ? {background:'accent-900-0.43'} : {background:'whatever_condition_false_color'} " ng-click="setMode('development')">
development
</md-button>