如何更改图标按钮上点击有角的js

我有以下代码如何更改图标按钮上点击有角的js

<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标签时我点击这个按钮。当我再次点击时，这个图标应该再次出现。只需要两个图标的切换效果。我想通过使用角度来实现这一点js

来源

2016-09-22 Arpit Meena

使用标记值将其设置为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>

来源

2016-09-22 10:29:51 Rakeschand

可以使用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>

控制器

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

来源

2016-09-22 10:34:57 Weedoze

您可以使用切换做到这一点并使用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是你的图标类。

来源

2016-09-22 10:36:12 Zeokav

可以使用纳克开关，像密码密文：

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

来源

2017-09-13 09:34:00 szista

如何更改图标按钮上点击有角的js

回答

相关问题