如何使用Angular Js更改按钮上的图标

时间:2016-09-22 10:22:55

标签: angularjs angular-material

我有以下代码:

<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实现这一点。

4 个答案:

答案 0 :(得分:1)

您可以使用ng-class指令

<强> CODE

<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="toggleButton()">
     <md-icon><i ng-class="{'material-icons' : toggle, 'material-icons2' : !toggle}">menu</i></md-icon>
</md-button>

<强> CONTROLLER

$scope.toggleButton = function(){
    $scope.toggle = !$scope.toggle;
}

答案 1 :(得分: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>

答案 2 :(得分:0)

使用标志值将其设置为true / false,然后在单击按钮后相应地更改值并使用以下代码。

<md-button class="md-primary md-raised" ng-click="openLeftMenu()">
   <md-icon md-font-icon ng-class="
           {'zmdi zmdi-upload': vm.flag, 
            'zmdi zmdi-code': !vm.flag
            }"></md-icon>
</md-button>

答案 3 :(得分:0)

您可以使用切换来执行此操作,并使用ng-class指令根据切换选择类。以下是您的工作方式 -

<div ng-init="icon='class1'">
  <md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()">
     <md-icon>
       <i ng-class="icon">menu</i>
     </md-icon>
  </md-button>
</div>

在openLeftMenu()函数中,单击处理类。

function openLeftMenu() {
  ...
  if(icon==='class1'){
    icon = 'class2';
  } else {
    icon = 'class1';
  }
  ...
}

这里class1和class2是你的图标类。