Question

我需要在按下按钮时按下一个按钮，按下它后会保持激活状态，并且只有在再次按下按钮后才会停用。

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

修改

我不能使用切换按钮，它需要是一个常规的按钮（在这种情况下是一个离子按钮轮廓），在按下时保持活动状态。

以下是一些代码：

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

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

主要问题是，如何访问按钮的激活状态，以便我可以将其激活。

Answer 1

在Ionic中，您可以将课程“有效”添加到 .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。

Answer 2

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

vocabulary.__len__

修改这是Codepen

的演示
和粘贴在这里的代码：

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

angular.module('mySuperApp', ['ionic']) .controller('MyCtrl',function($scope) { });

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

2 个答案: