AngularJS - 作为单选按钮的3按钮组

Question

使用Ionic框架,我正在尝试创建一组三个按钮作为单选按钮:

如果我点击早餐,我希望午餐和晚餐回到正常(白色)状态,早餐变成蓝色.

使用我当前的代码,我无法使用此功能,虽然我可以让按钮切换颜色,稍微随机(也许我只是不理解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>

我的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;
 }
};

如果您需要更多信息和工作解决方案,我可以将代码放在JSFidle中.

谢谢你的帮助.

---

注意:我想维护我的active()功能,并ng-class尽可能使用该指令,因为我有很多其他依赖于此功能的代码.

Answer 1

也许这个简化的例子会帮助你一点:

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>

演示:http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4？p = preview

Answer 2

这是针对未来Google员工的更灵活的解决方案.

工作人员:http://plnkr.co/edit/U2Hvx4？p = preview

.directive('barSelect',function($parse){
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      model: '=ngModel',
      value: '=barSelect'
    },
    link: function(scope, element, attrs, ngModelCtrl){
      element.addClass('button');
      element.on('click', function(e){
        scope.$apply(function(){
          ngModelCtrl.$setViewValue(scope.value);
        });
      });

      scope.$watch('model', function(newVal){
        element.removeClass('active');
        if (newVal === scope.value){
          element.addClass('active');
        }
      });
    }
  };
});

一个用法示例:

   <div class="button-bar">
     <a bar-select="button.value"
        ng-repeat="button in clientSideList"
        ng-model="data.clientSide"
     >{{button.text}}</a>
   </div>