angularjs - 在 AngularJS Material 中实现切换按钮的最佳方式

Question

我正在寻找一个简单的解决方案来在 AngularJS Material 中实现一个带有自定义选择/未选择图标的切换按钮。
该功能应该与 md-checkbox 相同(使用 ng-model 用于选择状态)，但我希望为选择/未选择状态显示我自己的图标。 md-checkbox 似乎不支持自定义图标，并且 md-button 缺少 ng-model。
最好我想避免实现自定义指令，而只能通过 css 来完成这项工作。这可以用 AngularJS Material 实现吗？

Answer 1

您可以定义一个 toggle function在您的 Controller 中创建切换事件，如下所示:

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

html上的按钮:

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