使用 angularjs 获取 btn-group (buttons-checkbox) 的选定按钮答案

【问题标题】：Get selected buttons of btn-group (buttons-checkbox) with angularjs使用 angularjs 获取 btn-group (buttons-checkbox) 的选定按钮
【发布时间】：2014-10-17 18:55:52
【问题描述】：

我正在使用引导程序和角度来构建应用程序。在 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：在“ng-click”方法中，我会将每个服务的属性值（例如“checked”属性）更改为 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";
        }
    }

【问题讨论】：

标签： angularjs twitter-bootstrap angularjs-filter buttongroup

【解决方案1】：

答案：引导界面

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

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

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

在此解决方案中，初始服务数组用于存储布尔字段“已选择”，以了解是否选择了任何特定服务。（类似于问题中的“检查”）。此字段是 2-way 绑定到复选框状态。单击复选框会更改字段，更改字段会更改复选框状态。

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

});

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

单选按钮行为

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

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];
  
});

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

注意：我使用 <label> 而不是 <button>，但我没有您的特殊 CSS 样式，因此它不会在屏幕上显示，就功能而言，它同样适用于 <button> 元素。

【讨论】：

谢谢，伯纳德。我真正想要的是像复选框这样的行为，因为我需要选择许多按钮。你能发布复选框使用的解决方案吗？
好的。对不起，我推断“收音机”只是因为你说你想知道哪个被选中。（这就是广播的全部内容）。我会编辑答案。
对答案进行了编辑以展示“复选框”式解决方案——实际上它更简单，因为它重用了原始服务数组。

【解决方案2】：

您并没有真正指定为什么要“获取”按钮。一般来说，像这样获取对 DOM 元素的引用不是“角度方式”。通常最好找到一种方法来使用 Angular 的数据绑定来操作 UI 元素。

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

【讨论】：

我想“获取”这些按钮，因为我需要使用一个休息 Web 服务来通知选择了哪些“服务”的 ID。我找不到一种方法来绑定我需要的这些信息......这就是为什么我要求更好的解决方案:) 感谢您的帮助