如何在一排Material Design按钮中更改所选按钮的外观?

时间:2015-08-28 11:15:48

标签: angularjs material-design

我有一个HTML表格,在几行中我在每个单元格中都有一个Material Design按钮,使用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>

一次只能选择一个按钮(例如单选按钮)。

如何更改所选按钮的颜色?

2 个答案:

答案 0 :(得分:4)

我通过使用三元运算符将ng-class放在按钮上来实现它

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

答案 1 :(得分:3)

ng-class属性可以解决问题。

在您的函数selectPlan中,您可能会将名称保存在某处。假设此var名为selectedPlan,您可以执行以下操作:

<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才会应用您的班级(此处为active)。所以只有当你的计划是选定的计划时。