Question

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

该功能应与md-checkbox相同（选择状态为ng-model），但我想为选定/未选中状态显示自己的图标。 md-checkbox似乎不支持自定义图标，而md-button缺少ng-model。

最好我想避免实现自定义指令，只能通过css完成这项工作。这是否可以使用Angular Material？

Answer 1

您可以定义toggle function以在控制器中创建切换活动，如下所示：

$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应该提供一个开箱即用的支持，用于带有自定义图标的切换按钮（或复选框）。

Answer 3

正确使用所有类Angular Material v1.x

<md-button class="md-icon-button" ng-click="filterToggle = !filterToggle" ng-class="{'md-primary md-raised' : filterToggle}">
    <md-tooltip md-direction="bottom">Filter</md-tooltip>
    <md-icon ng-hide="filterToggle">filter_list</md-icon>
    <md-icon ng-show="filterToggle">clear_all</md-icon>
</md-button>

在控制器集

中

$scope.filterToggle = false;

Answer 4

var app = angular.module('app', []);

    app.controller('CommentController', function ($scope) {

            $scope.filterToggle = true;
            //start function.
            $scope.StartFunc = function () {
                $scope.filterToggle = false;
              console.log('in pause function.');
            };
            $scope.CallFunc = function () {
                $scope.filterToggle ? $scope.StartFunc() : $scope.PauseFunc();
            }
            // pause function.
            $scope.PauseFunc = function () {
              $scope.filterToggle = true;
              console.log('in pause function.');
            }
    })

<link href="https://material.angularjs.org/1.1.2/angular-material.min.css" rel="stylesheet"/>

<script src="https://material.angularjs.org/1.1.2/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="CommentController">
    <md-input-container>
      <md-button class="md-icon-button md-primary md-raised" ng-click="CallFunc()">
        <md-tooltip md-direction="bottom">Start/Pause Func</md-tooltip>
        <md-icon ng-hide="filterToggle" style="background-color:grey;width:auto;">pause</md-icon>
        <md-icon ng-show="filterToggle" style="background-color:grey;width:auto;">play_arrow</md-icon>
      </md-button>
    </md-input-container>
    </div>
    </div>

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

4 个答案: