Question

我正在尝试从button-checkbox获取数组中所选按钮的ID。我能够在视图中成功显示所选按钮的ID，但无法在控制器中以数组形式获取所选的ID。

这是我的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="script.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" ng-click="test(availability.services)" btn-checkbox >{{service.name}}</label>
  </div>
  <div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>

</html>

这是控制器

    var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  var services = [ 
    { name:'Service A',id:1 },
    { name:'Service B',id:2},
    { name:'Service C',id:3 },
    { name:'Service D',id:4}
  ];

  $scope.availability = { services:services };
});

请参阅plnker链接

http://plnkr.co/edit/DeVPNug9APWWpwZByvnu?p=preview

Answer 1

你走了：

$scope.getSelectedIDs = function() {
    var ids = [];
    angular.forEach($scope.availability.services, function(service) {
        if (service.selected) {
            ids.push(service.id);
        }
    })

    return ids;
};

现在，只需在控制器中的任何位置调用方法$scope.getSelectedIDs()，您希望在数组中选择ID。

http://plnkr.co/edit/rS47sIEo1HaaDqrc3BUw?p=preview

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  var services = [{
    name: 'Service A',
    id: 1
  }, {
    name: 'Service B',
    id: 2
  }, {
    name: 'Service C',
    id: 3
  }, {
    name: 'Service D',
    id: 4
  }];

  $scope.availability = {
    services: services
  };

  $scope.getSelectedIDs = function() {
    var ids = [];
    angular.forEach($scope.availability.services, function(service) {
      if (service.selected) {
        ids.push(service.id);
      }
    })

    return ids;
  };

  $scope.alertMeSelectedIDs = function() {
    console.log($scope.getSelectedIDs());
    alert($scope.getSelectedIDs());
  };
});

<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="script.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" ng-click="test(availability.services)" btn-checkbox>{{service.name}}</label>
  </div>
  <div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span>
  </div>
  <br>
  <a ng-click="alertMeSelectedIDs()">Show me selected</a>
</body>

</html>

Answer 2

我已经分叉了代码：http://plnkr.co/edit/eQxsq194qqRUo8Vs326H?p=preview

app.controller('MainCtrl', function($scope) {

  var services = [ 
    { name:'Service A',id:1 },
    { name:'Service B',id:2},
    { name:'Service C',id:3 },
    { name:'Service D',id:4}
  ];

  $scope.availability = { services:services };


  $scope.test = function (service){
    console.log (service);
  }
});

<强> HTML

<body ng-controller="MainCtrl">
  <div class="btn-group-justified">
    <label ng-repeat="service in availability.services" class="btn btn-primary"  ng-model="service.selected" ng-click="test(service)" btn-checkbox >{{service.name}}</label>
  </div>
  <div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>

使用AngularJS在数组中获取选定的按钮ID

2 个答案: