当用户按下一个按钮时,如何更改其他AngularJS材质按钮颜色

时间:2018-01-17 05:52:05

标签: angularjs

我有两个按钮。在该视图中,当用户单击按钮1时,我显示html表单。那时我需要将另一个按钮的颜色改为Angular JS matterial按钮(Button)。请帮我实现这个目标。我试过例子。但它并没有改变。

 <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-raised md-primary" ng-click="show = 1">Create User</md-button>
<md-button class="md-raised md-primary" ng-click="show = 2">Reset Password</md-button>

    

<md-input-container class="md-block">
  <label>E-mail</label>
  <input required md-asterisk name="email" ng-model="mgUsers.model.email">
    <div ng-messages="manageUsersForm.email.$error">
      <div ng-message="required">Email is required.</div>
    </div>
</md-input-container>

<md-radio-group ng-model="mgUsers.model.designation">
  <md-radio-button value="supervisor" class="md-primary"> Supervisor</md-radio-button>
  <md-radio-button value="contractor"> Contractor </md-radio-button>
</md-radio-group>

<div layout="row" layout-align="center center">
  <md-button class="md-raised md-primary bm-button" ng-disabled="manageUsersForm.$invalid || manageUsersForm.$pristine" ng-click="$manageUsersController.submitUser(mgUsers.model.email, mgUsers.model.designation)">Submit</md-button>
</div>

</ng-form>

    

<md-input-container class="md-block">
  <label>E-mail</label>
  <input required md-asterisk name="email" ng-model="userReset.model.email">
    <div ng-messages="usersResetForm.email.$error">
      <div ng-message="required">Email is required.</div>
    </div>
</md-input-container>

<div layout="row" layout-align="center center">
    <md-button class="md-raised md-primary bm-button" ng-disabled="usersResetForm.$invalid || usersResetForm.$pristine" ng-click="$manageUsersController.resetUser(userReset.model.email)">Reset Password</md-button>
</div>

</ng-form>

1 个答案:

答案 0 :(得分:1)

你可以这样做:

<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-raised" ng-class="show == 1 ? 'md-anotherColor' : 'md-primary'" ng-click="show = 1">Create User</md-button>

<md-button class="md-raised md-primary" ng-class="show == 2 ? 'md-anotherColor' : 'md-primary'" ng-click="show = 2">Reset Password</md-button>