Question

我使用bootstrap和angular来构建应用程序。在HTML页面中，我使用了这个：

<div class="btn-group-justified" data-toggle="buttons-checkbox">
    <button type="button" class="btn fzbtn-consServices" ng-repeat="service in availability.services">{{service.name}}</button>
</div>

构建具有动态值的按钮组。是否有实用的方法来获取此按钮组中的所选按钮？

我已经尝试了一些解决方案，其中一些正在运行，但我不知道它是否是最好的方式...
1：点击＆＃34; ng-click＆＃34;方法我会将每个服务的属性值（例如＆＃34;检查＆＃34;属性）更改为true或false;
2：我搜索了btn-group的任何html属性，它可以为我提供这个组中所有选中的按钮，但是我没有成功;
3：我听说我可以使用Angular Filter来解决这个问题，但我没有找到任何类似的例子;

任何有更好主意的人？非常感谢:)。

这是我迄今为止找到的最佳解决方案：

<div class="btn-group-justified" data-toggle="buttons-checkbox">
    <button type="button" class="btn fzbtn-consServices" ng-repeat="service in availability.services" ng-click="onClickService(service)" ng->{{service.name}}</button>
</div>

控制器：

$scope.onClickService = function (service) {
        if (service.checked) {
            service.checked = "false"
        } else {
            service.checked = "true";
        }
    }

Answer 1

答案：引导程序用户界面

我感觉到你的痛苦。 Bootstrap并不总是角度友好的。但是有一个很好的解决方案：

最简单（也是最干净）的方法是使用Bootstrap UI。由Angular团队构建，它是对Bootstrap的javascript部分的重写，但是对于Angular友好的用法。以下是关于按钮的部分：http://angular-ui.github.io/bootstrap/#/buttons

示例解决方案：复选框按钮行为

在此解决方案中，初始服务数组用于存储布尔字段＆＃39; selected＆＃39;了解是否选择了任何特定服务。（类似于＆＃34;已检查＆＃34;在问题中）。此字段是双向限制为复选框状态。单击该复选框可更改字段，更改字段会更改复选框状态。

＆＃13;

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  
  var services = [ 
    { name:'Service A' },
    { name:'Service B', selected:true },
    { name:'Service C' },
    { name:'Service D', selected:true }
  ];
  
  $scope.availability = { services:services };

});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS BootStrap UI radios</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
  <script src="app.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-controller="MainCtrl">
  <div class="btn-group-justified">
    <label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" btn-checkbox>{{service.name}}</label>
  </div>
  <div ng-repeat="service in availability.services">{{service.name}} <span ng-show="service.selected">- selected</span></div>
</body>

</html>

＆＃13;

单选按钮行为

我已经提供了一个单一选择的解决方案＆＃34;复选框也称为＆＃34;单选按钮＆＃34;。＆＃34;当前选择＆＃34;绑定到范围的变量。当用户选择元素时，它将自动更新。反过来，设置它会改变当前的选择。

＆＃13;

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  
  var services = [ 
    { name:'Service A' },
    { name:'Service B' },
    { name:'Service C' },
    { name:'Service D' }
  ];
  
  $scope.availability = { services:services };
  $scope.model = {};
  
  // Here we are using the service object instance as the "selection value". 
  // Depending on what you need, you could also use some sort of identifier or 
  // even the $index if that's more useful.
  
  // Immediately select the second one.
  $scope.model.selectedService = services[1];
  
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS BootStrap UI radios</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
  <script src="app.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-controller="MainCtrl">
  <div class="btn-group-justified">
    <label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="model.selectedService" btn-radio="service">{{service.name}}</label>
  </div>
  <div>Current Selection is: {{model.selectedService.name}}</div>
</body>

</html>

＆＃13;

注意：我使用的是<label>而不是<button>，但我没有特殊的CSS样式，因此它在屏幕上没有表现，功能方面同样适用于{ {1}}元素。

Answer 2

你没有真正说明为什么你想要＆＃34;得到＆＃34;按钮。一般来说，获取像这样的DOM元素的引用不是＆＃34;角度方式。＆＃34;通常最好找到一种方法来使用角度数据绑定来操纵UI元素。

例如，如果要基于数据或其他UI事件显示或隐藏按钮，请使用绑定到绑定这些按钮的服务对象的属性的ng-show或ng-hide。然后，您可以更新对象的属性以更改UI。您应该能够找到一种类似的方法来进行其他更改（例如设置类，属性等）和角度数据绑定，而不是手动执行。

使用angularjs获取btn-group（buttons-checkbox）的选定按钮

2 个答案:

示例解决方案：复选框按钮行为

单选按钮行为