CODEWITHSUNDEEP
javascriptangularjs
bruh
bruh

Reputation: 2305

Angular Get Selected Value From Checkbox

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.

Upvotes: 2

Views: 572

Answers (2)

Pengyy
Pengyy

Reputation: 38171

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>

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

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>

Upvotes: 1

Related Questions