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

使用，我尝试创建一组由三个按钮组成的单选按钮：

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

在我当前的代码中，我无法使用此功能，尽管我可以让按钮稍微随机地切换颜色（也许我只是不理解

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>

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

谢谢你的帮助

---

---

注意：我想维护我的

active（）

函数，并尽可能使用

ng class

指令，因为我还有许多其他代码依赖于此函数。

也许这个简化的示例会对您有所帮助：

angular.module（'plunker'，[]）.controller（'MainCtrl'，function（$scope）{
$scope.active='早餐'；
$scope.setActive=函数（类型）{
$scope.active=类型；
};
$scope.isActive=函数（类型）{
返回类型==$scope.active；
};
});

早餐
午餐
晚餐
这是一个更灵活的解决方案，适合未来的谷歌用户

工作冲击器：

以及一个使用示例：

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


{{button.text}
这里有另一种方法，它结合了其他两种方法。它只需要具有以下属性的单个元素：


ng模型
按钮-包含“文本”和“值”属性的对象数组
按钮类-可选字符串，包含应用于渲染链接的CSS类，以及默认的“组btn”和“组btn活动”类


很有魅力，谢谢你。我知道ng类把我搞砸了。如果我们从twitter引导类开始，这似乎不起作用。看起来最好的方法是创建自己的button类看看，谢谢。我已经为此创建了一个代码笔，它应该适合离子组件。
.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>

.directive('buttonGroup',function($parse){
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
          model: '=ngModel',
          buttons: '=',
          buttonClass: '='
        },
        template: '<a class="group-btn {{buttonClass}}" ' +
                  '   ng-repeat="button in buttons" ' +
                  '   ng-class="{\'group-btn-active\': isActive(button.value)}" ' +
                  '   ng-click="buttonClicked(button.value)"> ' +
                  '       {{button.text}} ' +
                  '</a>',
        controller: ['$scope', function($scope) {
            $scope.buttonClicked = function(value) {
                $scope.value = value;
            };
            $scope.isActive = function(value) {
                return $scope.value === value;
            };
        }],
        link: function(scope, element, attrs, ngModel) {
            element.on('click', function(e){
                scope.$apply(function(){
                    ngModel.$setViewValue(scope.value);
                });
            });

            scope.$watch('model', function(newVal){
                scope.value = newVal;
            });
        }
    };
})

<button-group ng-model="sortOrder" buttons="sortOptions" 
    button-class="'md-button my-other-class'"></button-group>

$scope.sortOptions = [
        { value: 'priority', text: 'Priority' },
        { value: 'duration', text: 'Call Duration' }
    ];