Dav*_*eto 5 javascript angularjs ionic-framework ionic
我需要在按下按钮后按下一个按钮,按下按钮后再按下按钮,只有再次按下按钮才会停用.
有一个类似的问题,但它只适用于图标按钮.(如何添加具有离子开启/离子关闭功能的导航栏按钮).
编辑
我不能使用切换按钮,它需要是一个常规的按钮(在这种情况下是一个离子按钮轮廓),按下时保持活动状态.
这是一些代码:
<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>
如您所见,是一个简单的水平按钮阵列.他们假设充当消息收件箱的过滤器,因此当过滤器处于活动状态时,他们必须保持按下(最多一个).像一个标签,但不完全.
主要问题是,如何访问按钮的激活状态,以便我可以将其激活.
在Ionic中,您可以将类" active " 添加到.button,使其看起来按下/激活.
要一次只激活一个,您可以执行以下操作:
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>您可能会发现切换按钮很有用.以下是此示例的官方链接:
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
编辑: 这是Codepen的演示
和粘贴在这里的代码:
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>| 归档时间： |
|
| 查看次数： |
13579 次 |
| 最近记录： |