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

Posted 2023-03-05

【中文标题】AngularJS - 用作单选按钮的 3 按钮组

【英文标题】：AngularJS - 3-button group acting as radio buttons

【发布时间】：2014-04-11 02:25:15

【问题描述】：

使用Ionic framework，我正在尝试创建一组三个按钮作为单选按钮：

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

使用我当前的代码，我无法使用此功能，尽管我可以让按钮稍微随机地切换颜色（也许我只是不理解 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 指令，因为我有很多其他代码依赖于这个函数。

【问题讨论】：

看看***.com/a/13450409

【参考方案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

【讨论】：

像魅力一样工作，谢谢。我知道 ng-class 把我搞砸了。

如果我们从 twitter 引导类开始，这似乎不起作用。似乎最好的方法是创建自己的按钮类

【参考方案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>

【讨论】：

谢谢。我为此创建了一个适合 Ionic 组件的代码笔。 codepen.io/niyando/pen/GpEeQR

【参考方案3】：

这是另一种结合其他两种方法的替代方法。它只需要一个具有以下属性的 元素：

ng-模型 按钮 - 包含“文本”和“值”属性的对象数组 button-class - 除了默认的 'group-btn' 和 'group-btn-active' 类之外，包含要应用于呈现链接的 CSS 类的可选字符串

.

.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>

其中 sortOptions 将是以下形式的数组：

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