CODEWITHSUNDEEP
angularjsmaterial-design
sdmorris
sdmorris

Reputation: 369

How do I change the appearance of the selected button in a row of Material Design buttons?

I have a HTML table and in several rows I have a Material Design button in each cell, dynamically generated using AngularJS.

enter image description here

<table class="plans">
    <tbody>
        <tr>
            <td>Work Plans</td>
            <td ng-click="pbmainController.selectPlan(plan.planName)"
                ng-repeat="plan in pbmainController.planList">
                    <md-button class="md-raised">{{plan.planName}}</md-button>
            </td>
        </tr>
    </tbody>
</table>

Only one of button can be selected at a time (i.e. like a radio button).

How do I change the color of the selected button?

Upvotes: 2

Views: 9586

Answers (2)

Pierre-Alexandre Moller
Pierre-Alexandre Moller

Reputation: 2354

A ng-class attribute will do the trick.

In your function selectPlan you probably save the name somewhere. Assuming this var is named selectedPlan, you can do something like this :

<table class="plans">
    <tbody>
        <tr>
            <td>Work Plans</td>
            <td ng-click="pbmainController.selectPlan(plan.planName)"                   
                ng-repeat="plan in pbmainController.planList">
                    <md-button  ng-class="{'active' : plan.planName == selectedPlan}" class="md-raised">{{plan.planName}}</md-button>
            </td>
        </tr>
    </tbody>
</table>

ng-class will be apply your class (here active) only when the condition is true. So only when your plan is the selected one.

Upvotes: 3

sdmorris
sdmorris

Reputation: 369

I got it to work by putting the ng-class on the button, using the ternary operator

<table class="plans">
    <tbody>
        <tr>
            <td>Work Plans</td>
            <td ng-click="pbmainController.selectPlan(plan.planName)"
                ng-repeat="plan in pbmainController.planList">
                    <md-button ng-class="plan.planName == selectedPlanName ? 'md-raised md-primary' : 'md-raised'">{{plan.planName}}</md-button>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 4

Related Questions