4

我正在寻找一个简单的解决方案来在 AngularJS Material 中实现一个带有自定义选择/未选择图标的切换按钮。

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

最好我想避免实现自定义指令，而只能通过 css 来实现。AngularJS 材料可以做到这一点吗？

4

4 回答 4

8

您可以在控制器中定义一个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}">
于 2016-05-04T21:08:19.400 回答
6

经过一番挖掘，目前最好的解决方案似乎是使用一个 md 按钮，它允许自定义图标，ng-click并ng-class像这样扩展它：

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

这负责选择状态。然后在 CSS 中，我可以设置选定按钮类的样式

尽管解决方案相当简单，但我认为 Angular Material 应该为带有自定义图标的切换按钮（或复选框）提供开箱即用的支持。

于 2016-05-02T11:54:55.207 回答
2

正确使用所有类别的 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;
于 2016-08-18T07:16:25.623 回答
1 

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>

于 2016-11-16T06:57:01.957 回答