AngularJS - 充当单选按钮的 3 按钮组

使用离子框架 http://ionicframework.com/，我正在尝试创建一组充当单选按钮的三个按钮：

如果我点击早餐，我希望午餐和晚餐恢复到正常（白色）状态，早餐变成蓝色。

使用我当前的代码，我无法让这个功能工作，尽管我可以让按钮稍微随机地切换颜色（也许我只是不明白ng-class指示）。

这是我的 HTML 代码：

<div class="bar bar-subheader">
 <div class="button-bar">
   <a class="button" ng-class="{'button-positive' : !isActiveB, 'none': isActiveB}" ng-click="active('breakfast')">Breakfast</a>
   <a class="button" ng-class="{'button-positive' : !isActiveL, 'none': isActiveL}" ng-click="active('lunch')">Lunch</a>
   <a class="button" ng-class="{'button-positive' : !isActiveD, 'none': isActiveD}" ng-click="active('dinner')">Dinner</a>
 </div>
</div>

My JS:

$scope.active = function(meal) {

 switch (meal) {
   case 'breakfast':
     $scope.$broadcast('slideBox.setSlide', 0);
     $scope.isActiveB = $scope.isActiveB;
     $scope.isActiveL = !$scope.isActiveL;
     $scope.isActiveD = !$scope.isActiveD;
     break;
   case 'lunch':
     $scope.$broadcast('slideBox.setSlide', 1);
     $scope.isActiveB = !$scope.isActiveB;
     $scope.isActiveL = $scope.isActiveL;
     $scope.isActiveD = !$scope.isActiveD;
     break;
   case 'dinner':
     $scope.$broadcast('slideBox.setSlide', 2);
     $scope.isActiveB = !$scope.isActiveB;
     $scope.isActiveL = !$scope.isActiveL;
     $scope.isActiveD = $scope.isActiveD;
     break;
 }
};

如果您需要更多信息和可行的解决方案，我可以将代码放在 JSFiddle 中。

感谢您的帮助。

注意：我想保持我的active()函数，并使用ng-class如果可能的话，使用指令，因为我有很多其他代码依赖于这个函数。

也许这个简化的例子会对你有一点帮助：

angular.module('plunker', []).controller('MainCtrl', function($scope) {
    $scope.active = 'breakfast';
    $scope.setActive = function(type) {
        $scope.active = type;
    };
    $scope.isActive = function(type) {
        return type === $scope.active;
    };
});

<link rel="stylesheet" href="http://code.ionicframework.com/0.9.26/css/ionic.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>

<div ng-app="plunker" ng-controller="MainCtrl" class="bar bar-subheader">
    <div class="button-bar">
        <a class="button" ng-class="{'button-positive': isActive('breakfast')}" ng-click="setActive('breakfast')">Breakfast</a>
        <a class="button" ng-class="{'button-positive': isActive('lunch')}" ng-click="setActive('lunch')">Lunch</a>
        <a class="button" ng-class="{'button-positive': isActive('dinner')}" ng-click="setActive('dinner')">Dinner</a>
    </div>
</div>

Demo: http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=preview http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=preview