在角度材质中实现切换按钮的最佳方法

Question

我正在寻找一个简单的解决方案来实现一个切换按钮,其中包含Angular Material中的自定义选定/未选定图标.

该功能应该与md-checkbox相同(使用选择状态的ng-model),但我希望为选定/未选择状态显示我自己的图标.md-checkbox似乎不支持自定义图标,而md-button缺少ng-model.

我希望避免实现自定义指令,只能通过css实现这项工作.这是否可以使用Angular材料？

Answer 1

您可以toggle function在控制器中定义a 来创建切换活动,如下所示:

$scope.toggle = function() {
    $scope.variable = !$scope.variable
    console.log($scope.variable);
}

html上的按钮:

<md-button 
    ng-click="toggle()" 
    ng-class="{ 'active': variable, 'disable': !variable}">

Answer 2

经过一些挖掘,最好的解决方案目前似乎是使用md按钮,它允许自定义图标,并使用ng-click和ng-class扩展它,如下所示:

<md-button ng-click="selected = !selected" ng-class="{'selected-button' : selected}">

这样可以处理选择状态.然后在CSS中我可以设置所选按钮类的样式

即使解决方案相当简单,我认为Angular Material应该有一个开箱即用的支持,用于带有自定义图标的切换按钮(或复选框).