如何更改 Material Design 按钮行中选定按钮的外观？答案

【问题标题】：How do I change the appearance of the selected button in a row of Material Design buttons?如何更改 Material Design 按钮行中选定按钮的外观？
【发布时间】：2015-08-28 11:15:48
【问题描述】：

我有一个 HTML 表格，在几行中，我在每个单元格中都有一个 Material Design 按钮，使用 AngularJS 动态生成。

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

一次只能选择一个按钮（例如单选按钮）。

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

【问题讨论】：

标签： angularjs material-design

【解决方案1】：

我通过使用三元运算符将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>

【讨论】：

如果我想在单击按钮后删除悬停效果，md-button 具有悬停透明灰色效果。看起来类似于我的这个问题。 ` {{'LABELS.CHART' |翻译}} `
stackoverflow.com/questions/44933188/…

【解决方案2】：

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

在您的函数 selectPlan 中，您可能会将名称保存在某处。假设这个变量被命名为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）。所以只有当你的计划被选中时。

【讨论】：

我无法让它工作。我什至尝试过ng-class="{'md-warn' : 1==1}"，我认为它会无条件地将所有按钮变为红色。
ng-class 必须在md-button 上，而不是<td> 上