javascript 如何在 Ionic 中制作开/关按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30462462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a On/Off button in Ionic
提问by David Prieto
I need to put a button in Ionic that stays activated after it's been pressed, and only deactivates after it's been pressed again.
我需要在 Ionic 中放置一个按钮，该按钮在按下后保持激活状态，并且仅在再次按下后才停用。
There is a similar question but it only applies to icon buttons. (How to adding navigation bar button having ionic-on/ ionic-off functionality).
有一个类似的问题，但它只适用于图标按钮。（如何添加具有离子开/离子关功能的导航栏按钮）。
EDIT
编辑
I can't use a toggle button, it is required to be a regular looking buttom (in this case an Ionic button-outline) that stays active when pressed.
我不能使用切换按钮，它需要是一个普通的按钮（在这种情况下是一个 Ionic 按钮轮廓），在按下时保持活动状态。
Here is some code:
这是一些代码：
<div class="botones">
<div class="row">
<div class="col">
<button class="button button-outline button-block button-positive">
Promociones
</button>
</div>
<div class="col">
<button class="button button-outline button-block button-energized" >
Aprobados
</button>
</div>
<div class="col">
<button class="button button-outline button-block button-assertive" >
Alerta
</button>
</div>
<div class="col">
<button class="button button-outline button-block button-balanced" >
ATM
</button>
</div>
</div>
</div>
As you can see is a simple horizontal array of buttons. They suppose to act as filters for a message inbox, so they have to stay pressed (one at the time at most) as the filter is active. Like a tab but not quite.
如您所见，是一个简单的水平按钮阵列。他们假设充当消息收件箱的过滤器，因此当过滤器处于活动状态时，它们必须保持按下状态（最多一次）。像一个标签，但不完全是。
The main question is, how can I access the activated state of the button so I can mantain it activated.
主要问题是，如何访问按钮的激活状态，以便我可以保持激活状态。
采纳答案by Nikola
You may find toggle button useful. Here's the official linkto this example:
您可能会发现切换按钮很有用。这是此示例的官方链接：
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
edit:Here's a demo from Codepen
编辑：这是Codepen的演示
and the code pasted here:
和粘贴在这里的代码：
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
});<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>回答by Jonas Masalskis
In Ionic, you can add class 'active' to a .button, to make it look pressed/active.
在 Ionic 中，您可以将类“ active”添加到.button 中，使其看起来被按下/激活。
And to make only one active at a time, you can do something like this:
并且一次只激活一个，您可以执行以下操作：
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.buttons = [
{icon: 'beer', text: 'Bars'},
{icon: 'wineglass', text: 'Wineries'},
{icon: 'coffee', text: 'Cafés'},
{icon: 'pizza', text: 'Pizzerias'},
];
$scope.activeButton = 0;
$scope.setActiveButton = function(index) {
$scope.activeButton = index;
};
});<html ng-app="ionicApp">
<head>
<link href="//code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-content class="padding">
<div class="button-bar">
<button
ng-repeat="button in buttons"
ng-class="{'active': activeButton == $index}"
ng-click="setActiveButton($index)"
class="button icon ion-{{button.icon}}"
>
{{button.text}}
</button>
</div>
</ion-content>
</body>
</html>Also, you can view a demo on Codepen.
此外，您可以在 Codepen 上查看演示。
