在 AngularJS Material 中实现切换按钮的最佳方式
Best way to implement a toggle button in AngularJS Material
我正在寻找一个简单的解决方案来在 AngularJS Material.
中实现带有自定义选中/未选中图标的切换按钮
功能应该与 md-checkbox 相同(选择状态使用 ng-model),但我想为选中/未选中状态显示我自己的图标。 md-checkbox 好像不支持自定义图标,md-button 也没有 ng-model。
我最好避免实施自定义指令,而只通过 css 来实现。这可能与 AngularJS Material?
经过一些挖掘,目前最好的解决方案似乎是使用 md-button,它允许自定义图标,并使用 ng-click
和 ng-class
扩展它,如下所示:
<md-button ng-click="selected = !selected"
ng-class="{'selected-button' : selected}">
这会处理选择状态。然后在 CSS 中,我可以设置 selected-button class
的样式
尽管解决方案相当简单,但我认为 Angular Material 应该为带有自定义图标的切换按钮(或复选框)提供开箱即用的支持。
您可以定义一个 toggle function
来在您的控制器中创建切换 activity,如下所示:
$scope.toggle = function() {
$scope.variable = !$scope.variable
console.log($scope.variable);
}
html 上的按钮:
<md-button
ng-click="toggle()"
ng-class="{'active': variable, 'disable': !variable}">
正确使用 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;
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>
我正在寻找一个简单的解决方案来在 AngularJS Material.
中实现带有自定义选中/未选中图标的切换按钮功能应该与 md-checkbox 相同(选择状态使用 ng-model),但我想为选中/未选中状态显示我自己的图标。 md-checkbox 好像不支持自定义图标,md-button 也没有 ng-model。
我最好避免实施自定义指令,而只通过 css 来实现。这可能与 AngularJS Material?
经过一些挖掘,目前最好的解决方案似乎是使用 md-button,它允许自定义图标,并使用 ng-click
和 ng-class
扩展它,如下所示:
<md-button ng-click="selected = !selected"
ng-class="{'selected-button' : selected}">
这会处理选择状态。然后在 CSS 中,我可以设置 selected-button class
的样式尽管解决方案相当简单,但我认为 Angular Material 应该为带有自定义图标的切换按钮(或复选框)提供开箱即用的支持。
您可以定义一个 toggle function
来在您的控制器中创建切换 activity,如下所示:
$scope.toggle = function() {
$scope.variable = !$scope.variable
console.log($scope.variable);
}
html 上的按钮:
<md-button
ng-click="toggle()"
ng-class="{'active': variable, 'disable': !variable}">
正确使用 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;
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>