angularjs - 如何使用 Angular Js 单击更改按钮中的图标

Question

我有以下代码:

<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()">
     <md-icon><i class="material-icons">menu</i></md-icon>
</md-button>

如您所见，在 md-button 标签内，我有 md-icon ，其中包含 i 元素。我想在单击按钮时更改 i 标记。当我再次单击该图标时，该图标应该会变回来。简而言之，我想要一个带有两个图标的切换效果，并且我想使用 Angularjs 来实现此目的。

Answer 1

您可以使用 ng-switch，就像密码编辑一样:

<md-button ng-switch="vm.isPasswordVisible" ng-click="vm.isPasswordVisible=!vm.isPasswordVisible" ng-class="md-icon-button">
  <md-icon ng-switch-when="false" md-font-library="material-icons"> visibility_off </md-icon>
  <md-icon ng-switch-when="true" md-font-library="material-icons"> visibility </md-icon>
</md-button>