Angular Get Selected Value From Checkbox

Question

I can't seem to get the selected item from an input checkbox.

<ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='whatIsChecked(shoe.selected)'>Apply</button>
</ul>

Then in my controller:

$scope.whatIsChecked = function(selectedThing) {
  console.log(selectedThing);
};

The above returns undefined.

The list items are displayed correctly, but the shoe.name or checked item doesn't seem to be stored by the ng-model.

I wouldn't be changing the data in shoebox. Currently it is a collection of different shoes that prints out correctly. When I select the associated checkbox, I would like that item to be stored on the model. Hope that answers your question — bruh
– bruh, Commented Apr 24, 2017 at 2:21

Pengyy · Accepted Answer · 2017-04-24 03:13:25Z

2

the variable shoe is only valid in ng-repeat block.

If you want to got what is selected, you should try filter.

UPD: Since you don't have the selected property, you should keep the selected items somewhere else by firing the ng-click event.

refer below code snippet.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
  
    $scope.checkedShoes = [];
    
    $scope.shoebox = [{
        name: 'shoe1'
      },
      {
        name: 'shoe2'
      },
      {
        name: 'shoe3'
      },
      {
        name: 'shoe4'
      }
    ];
    
    $scope.save = function(e, shoe) {
      if (e.target.checked) {
        $scope.checkedShoes.push(shoe);
      } else {
        var index = $scope.checkedShoes.indexOf(shoe);
        if( index > -1) {
          $scope.checkedShoes.splice(index, 1);
        }
      }
      
    };
    
    $scope.whatIsChecked = function() {
      //var selected = $scope.shoebox.filter(function(item) {
      //  return item.selected === true;
      //});
      
      console.log($scope.checkedShoes);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" , ng-controller="myCtrl">
  <ul>
    <li ng-repeat='shoe in shoebox'>
      <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'>
      <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
    </li>
    <button ng-click='whatIsChecked()'>Apply</button>
  </ul>
</div>

edited Apr 24, 2017 at 3:13

answered Apr 24, 2017 at 2:19

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

8 Comments

bruh Over a year ago

I can run your snippet and it works great, however - when I try - I'm getting an empty array [] returned from console.log(selected) . I think its because I'm not explicitly setting each shoe to false like you did in your example. Could this be modified to not need a selected property in each shoe object?

Pengyy Over a year ago

@bruh so you mean not to save the selected info in your shoebox?

bruh Over a year ago

I used shoe.selected as an example name for ng-model. I don't actually have a selected property in each shoe object (like you have in your example). I believe this is why I'm getting an empty array returned when I try to console.log(selected)

Pengyy Over a year ago

@bruh Got it. wait a moment.

Pengyy Over a year ago

@bruh I have update the code snippet to avoid this error from happening.

|

Sajeetharan · Accepted Answer · 2017-04-24 02:22:21Z

You can get the checked items using a angular.Foreach it becomes easy when you have multiple items checked.

$scope.checkedItems = [];
        angular.forEach($scope.shoebox, function(value, key) {
          if (value.selected)
            $scope.checkedItems.push(value.name);
});

Demo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.shoebox = [{
    name: 'Reboke',
    selected: false
  }, {
    name: 'woodlands',
    selected: false
  }, {
    name: 'Nike',
    selected: false
  }, {
    name: 'Fila',
    selected: false
  }];
  $scope.checkedItems = function() {
    $scope.checkedItems = [];
    angular.forEach($scope.shoebox, function(value, key) {
      if (value.selected)
        $scope.checkedItems.push(value.name);
    });

  }
});

<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='checkedItems()'>Apply</button>
   Checked items are: {{checkedItems}}
</ul>
     
</body>
</html>

Collectives™ on Stack Overflow

Angular Get Selected Value From Checkbox

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related