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

Question

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

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

像这样 :

这是代码:

<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中的按钮"活动".