Get selected button id in array using AngularJS

Question

I am trying to get id's of selected buttons in an array from button-checkbox. I am able to successfully show the selected button's id in view but unable to get the selected ids in array form in controller.

Here is my HTML code

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

and here is controller

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

please see the plnker link

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

unable to show id in array What do you mean???

Vivek
– Vivek

2015-12-17 12:10:33 +00:00
Commented Dec 17, 2015 at 12:10 — Vivek
– Vivek, Commented Dec 17, 2015 at 12:10

Shashank Agrawal · Accepted Answer · 2015-12-17 12:21:19Z

1

Here you go:

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

    return ids;
};

Now, just call the method $scope.getSelectedIDs() anywhere in your controller where you want the selected ids in array.

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>

edited Dec 17, 2015 at 12:21

answered Dec 17, 2015 at 12:10

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

golucoder Over a year ago

it's perfect but I just want to show array in console not in view part hope you got it

Shashank Agrawal Over a year ago

Yes Sure. I've updated the answer. Open the browser console, hit the above Run code snippet button, select some service and hit Show me selected. You will see the values in console.

golucoder Over a year ago

Hi @shashank Thanks for your code but please tell me that how I can retrieve that array after click on button I want that dynamic generated array (button are those 4 not through any external link)

Shashank Agrawal Over a year ago

I've already added that in the answer yesterday. See alertMeSelectedIDs() method and the <a> tag in HTML.

golucoder Over a year ago

but I want to show after click on button not through any external link

|

Johannes Jander · Accepted Answer · 2015-12-17 12:16:34Z

0

I have forked the code: 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>

answered Dec 17, 2015 at 12:16

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

1 Comment

ggorlen Over a year ago

What does this add exactly?

Collectives™ on Stack Overflow

Get selected button id in array using AngularJS

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related