如何在 Ionic 中制作开/关按钮答案

【问题标题】：How to make a On/Off button in Ionic如何在 Ionic 中制作开/关按钮
【发布时间】：2015-08-08 08:36:04
【问题描述】：

我需要在 Ionic 中放置一个按钮，该按钮在按下后保持激活状态，只有在再次按下后才会停用。

有一个类似的问题，但它只适用于图标按钮。 (How to adding navigation bar button having ionic-on/ ionic-off functionality)。

编辑

我不能使用切换按钮，它必须是一个常规外观的按钮（在本例中为 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>

如您所见，这是一个简单的水平按钮阵列。他们假设充当消息收件箱的过滤器，因此当过滤器处于活动状态时，他们必须保持按下状态（最多一次）。像标签但不完全一样。

主要问题是，我怎样才能访问按钮的激活状态，以便保持它处于激活状态。

【问题讨论】：

您应该提供一些不起作用的示例（plunker ？）。您还应该向您展示您尝试解决此问题的方法。

标签： javascript angularjs ionic-framework ionic

【解决方案1】：

您可能会发现切换按钮很有用。这是此示例的official link：

<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>

【讨论】：

我已经考虑过了，但由于要求不能这样。
请看看我的编辑。这是一个相当简单的例子，但应该能让你朝着正确的方向开始。您也可以在 StackOverflow 上运行它，只需单击 Run code sn-p，您就会看到它按预期工作。
太棒了，这处理了视觉部分。
我很高兴它成功了！老实说，实际上我今天自己偶然发现了这个，所以是的，在某种程度上我也帮助了我自己:)

【解决方案2】：

在 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>

另外，您可以查看demo on Codepen。

【讨论】：