如何在Ionic中实施“控制组”？

Question

我正在尝试在Ionic中实施“控制组”，

以下是我的期望：

但我在Ionic中找不到任何东西， 这是我所指的链接： http://ionicframework.com/docs/components/#header

有什么建议吗？

Answer 1

我认为Ionic目前没有实现我可以做的唯一建议是使用切换（坏方法）或使用我用这种方式创建2个Listcontainers来切换它们之间的不同按钮

<div class="button-bar">
            <a class="button" ng-init="showme=true; setshowme(true)" ng-click="showme=true; setshowme(true)" ng-class="{'active': showme == true}">{{::lang.pnlPosOffenML}}</a>
            <a class="button" ng-click="showme=false; setshowme(false)" ng-class="{'active': showme == false}">{{::lang.pnlPosErledigtML}}</a>
        </div>

这就是我想出来的

Answer 2

嗨这对我有用，在你的html文件中将代码写为

<ion-item>
    <button class="button button-light" ng-disabled="!allow" ng-click="selectedMale()">Male</button>
    <button class="button button-light" ng-disabled="!notAllow" ng-click="selectedFemale()">Female</button>
    </ion-item>
     <ion-item>
    <button class="button button-light" ng-disabled="!notAllow" ng-click="selectedFemale()">Male</button>
    <button class="button button-light" ng-disabled="!allow" ng-click="selectedMale()">Female</button>
    </ion-item>

并且在您的控制器中代码为

$scope.allow = true;
  $scope.notAllow = true;
  $scope.selectedMale = function(){
    $scope.notAllow = false;
  }
  $scope.selectedFemale = function(){
    $scope.allow=false;
  }

如果有任何疑问，请回复