如何更改一排Material Design按鈕中所選按鈕的外觀？

Question

我有一個HTML表，並在幾行中，我在每個單元格中有一個材質設計按鈕，使用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> 

Only按鈕中的一個能夠在一個時間被選擇（即，像一個單選按鈕）。

如何更改所選按鈕的顏色？

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

Answer 2

A 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）只有當條件爲真。所以只有當你的計劃是選擇的計劃。