如何使一个离子开/关按钮 [英] How to make a On/Off button in Ionic
问题描述
我需要把离子一个按钮后，它已经pressed即保持激活，只有经过它已经再次pssed $ P $停用。
有一个类似的问题，但它仅适用于图标按钮。 （<一href=\"http://stackoverflow.com/questions/29841253/how-to-adding-navigation-bar-button-having-ionic-on-ionic-off-functionality\">How在添加导航栏按钮具有离子开/离子断功能）。
修改
我不能使用切换按钮，它需要是正则寻找BUTTOM（在此情况下的离子键外形）时pressed该保持活性
下面是一些code：
＆LT; DIV CLASS =botones＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =山坳＆GT;
＆LT;按钮类=按钮按钮外形键块按钮阳性＆GT;
PROMOCIONES
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =山坳＆GT;
＆LT;按钮类=按钮按钮外形键块按钮通电＆GT;
Aprobados
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =山坳＆GT;
＆LT;按钮类=按钮按钮外形键块按钮主见＆GT;
ALERTA
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =山坳＆GT;
＆LT;按钮类=按钮按钮外形键块按钮平衡＆GT;
自动取款机
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
正如你所看到的按钮是一个简单的水平数组。他们想充当过滤器消息收件箱，所以他们必须（在最多的时候一个）留pressed作为过滤器处于活动状态。就像一个标签，但并不完全。
主要的问题是，我怎么能访问按钮的激活状态，所以我可以十个分量它激活。
您可能会发现切换按钮非常有用。这里的官方链接这个例子：
＆LT;离子拨动NG模型=飞行模式切换级=切换-平静＆GT;飞行模式和LT; /离子切换＆GT;
编辑：
下面是从 codePEN
和code粘贴在这里：
angular.module（'mySuperApp'，['离子']）\r
.controller（'MyCtrl'，函数（$范围）{\r
\r
}）; \r
＆LT; HTML NG-应用=mySuperApp＆GT;\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT;标题＆GT;\r
切换按钮\r
＆LT; /标题＆GT;\r
\r
＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1，用户可扩展性=无＆GT;\r
\r
＆LT;链接HREF =// code.ionicframework.com /夜间/ CSS / ionic.css的rel =stylesheet属性＆GT;\r
＆LT;脚本的src =// code.ionicframework.com /夜间/ JS / ionic.bundle.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT; /头＆GT;\r
＆LT;车身类=填充NG-控制器=MyCtrl＆GT;\r
\r
＆LT;按钮类=按钮，按钮主要NG-模式=按钮NG点击=button.clicked = button.clicked！NG-CLASS =button.clicked按钮阳性？按钮 - 通电'＆GT;\r
确认\r
＆LT; /按钮＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
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.
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.
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.
You may find toggle button useful. Here's the official link to this example:
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
edit: Here's a demo from 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>
这篇关于如何使一个离子开/关按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
