我有以下代码:
<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实现这一点。
答案 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是你的图标类。