使用 AngularJS 在引导单选按钮上设置活动类答案

【问题标题】：Setting Active Class on Bootstrap Radio Buttons with AngularJS使用 AngularJS 在引导单选按钮上设置活动类
【发布时间】：2016-02-23 03:10:52
【问题描述】：

我尝试使用ng-repeat 指令和具有复选框行为的按钮在radioGroup 中生成单选按钮。我该怎么做才能正确？？？

$scope.config = [{
  name: 'First',
  callEvent: 'setValue()'
}, {
  name: 'Second',
  callEvent: 'setValue()'
}, {
  name: 'Third',
  callEvent: 'setValue()'
}];

HTML

<div class="btn-group">
  <label ng-repeat="item in config" class="btn btn-primary classButton"
         ng-click="item.callEvent" ng-model="radioModel" 
         uib-btn-radio="'{{item.name}}'">{{item.name}}
  </label>
</div>

【问题讨论】：

你能做一个 jsfiddle 以便我们轻松解决问题吗？您是否正确引用了控制器？将您的 HTML 标记为ng-app？正确引用angular.js？等等？

标签： javascript html angularjs angular-ui-bootstrap

【解决方案1】：

要从ng-repeat 指令添加的项中调用函数，请使用$index 作为调用参数。引导按钮使用active 类来指示选择。使用ng-class 指令将active 添加到所选按钮的类中。

<body ng-controller="test">
     <div class="btn-group">
          <label ng-repeat="item in config" 
                 class="btn btn-primary classButton" 
                 ng-class="config[$index].btnClass" 
                 ng-click="setActive($index)">
          {{item.name}}
          </label>
     <br> The active button is -- {{config[activeButton].name}}
     </div>

在您的模型控制器中：

angular.module('app', []).controller('test', function($scope) {
     $scope.config = [{
          name: 'First',
          btnClass: 'active'
     }, {
          name: 'Second',
          btnClass: ""
     }, {
          name: 'Third',
          btnClass: ""
     }];
     $scope.activeButton = 0;
     $scope.setActive = function setActive(index) {
         $scope.activeButton = index;
         for (var i = 0; i < $scope.config.length; i++)
               $scope.config[i].btnClass = "";
         $scope.config[index].btnClass = 'active';
    };
});

Plunker中的代码

【讨论】：