Question

使用令人敬畏的离子框架，我正在使用按钮栏，如下图：

enter image description here

但我希望当我按下一个按钮时，它应该保持按下而其他按钮关闭，当我按下第二个按钮时，它会保持按下而其他按钮关闭。

像这样：

enter image description here

这是代码：

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

Answer 1

我会使用ng-class来更改按钮。

只需创建一个活动按钮类，然后将逻辑添加到其中。

<div class="button-bar">
    <a class="button" ng-click="clicked(1)" ng-class="{'active': var == 1}">First</a>
    <a class="button" ng-click="clicked(2)" ng-class="{'active': var == 2}">Second</a>
    <a class="button" ng-click="clicked(3)" ng-class="{'active': var == 3}">Third</a>
</div>

在控制器中：

$scope.clicked = function(num) {
    $scope.var = num;
}

这会使Angular中的按钮“活动”。

Answer 2

以下是来自CodePen的工作演示，下面是复制粘贴。您可以通过单击下面的Run code snippet按钮直接在StackOverflow上运行此代码示例。

注意：它不是通用解决方案，但应该让您朝着正确的方向前进。

＆＃13;

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
  $scope.button = {};
  $scope.button.first = {};
  $scope.button.second = {};
  $scope.button.third = {};
    
  $scope.click = function(button){
    $scope.button.first.clicked = false;
    $scope.button.second.clicked = false;
    $scope.button.third.clicked = false;
    
    button.clicked = true;
  };

});

＆＃13;

<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">   
    <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">    
    <div class="button-bar">
      <a class="button" ng-model="button.first" ng-click="click(button.first)" ng-class="button.first.clicked?'button-positive':'button-energized'">First</a>
      <a class="button" ng-model="button.second" ng-click="click(button.second)" ng-class="button.second.clicked?'button-positive':'button-energized'">Second</a>
      <a class="button" ng-model="button.third" ng-click="click(button.third)" ng-class="button.third.clicked?'button-positive':'button-energized'">Third</a>
    </div>
  </body>
</html>

＆＃13;

编辑如果您想要像Shay建议的更精简的解决方案，您可以在CodePen example上看到Ionic上的完整实施，粘贴在下方。主要区别在于点击的功能不能像他那样写，并且会产生错误。无论如何，采取最适合你的解决方案。

＆＃13;

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

＆＃13;

<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">   
    <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">    
    <div class="button-bar">
      <a class="button" ng-click="click(1)" ng-class="{'button-positive':var==1}">First</a>
      <a class="button" ng-click="click(2)" ng-class="{'button-positive':var==2}">Second</a>
      <a class="button" ng-click="click(3)" ng-class="{'button-positive':var==3}">Third</a>
    </div>
  </body>
</html>

＆＃13;

Answer 3

我认为这可能会对您有所帮助：

DEMO

<强> HTML

  <a href="#" class="button" id="1">First</a>
  <a href="#" class="button" id="2">Second</a>
  <a href="#" class="button" id="3">Third</a>

<强> CSS

a
{
    text-decoration:none;
}

.button
{
    display:inline-block;
    padding:5px;
    height:20px;
    width:60px;
    text-align:center;
    background:#0CA68F;
    color:white;
}

.active
{
    background:#188171;
}

<强> JS

$("a").click(function()
{
  $(".button").removeClass("active");   
  $("#" + this.id).addClass("active");
});

如何使用按钮栏作为导航选项卡离子

3 个答案: