Get selected values of checkbox group Angular 1.6

Question

My goal is to have a set of checkboxes where users will make selections and when they hit the submit button, I'll print to the console what they chose.

My problem is that I can't seem to fetch the data from the checkbox group in my Javascript. I attempted to create a minimal reproducible example, but I can't even get the ng-repeat working on jsfiddle :-S jsfiddle

I want to use ng-repeat to create a bunch of checkboxes

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="answers.games" value="{{game.game_id}}">{{game.game}}
  </li>
</ul>

where on the javascript side I have something like

(function() {
    var app = angular.module('myApp', []);

    app.controller('playController', function($scope, $rootScope, $http){
        getWeeks();

        $scope.games = [
        {game_id: 1, game: "Game 1"},
        {game_id: 2, game: "Game 2"},
        {game_id: 3, game: "Game 3"}
        ]

        $scope.score_submission = function(){
            console.log($scope.answers)
        }
    })
})();

But, the checkboxes don't bind to $scope.answers the way I thought they would, instead, $scope.answers remains undefined. What I'd like to get back is an array of the game_id values that were checked.

My first question would be, why are you using a deprecated library instead of using Angular? — Baruch, Dec 19 '18 at 16:31
Because I'd used it before and I was going to avoid having to learn too much new stuff. — Mark, Dec 19 '18 at 16:44
if you want you can try alternate approach. https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs — varatharajan, Dec 19 '18 at 16:45

score 2 · Accepted Answer · answered Dec 19 '18 at 17:18

2

Another approach is:

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="selected[game.id]"> {{game.game}}
  </li>
</ul>

$scope.selected = {};

answered Dec 19 '18 at 17:18

georgeawg

48,608
13
72
95

Follow-up, I noticed that if I check a box and then uncheck it, it's not removed from $scope.selected - what do I need to do to enable that behavior? – Mark Dec 19 '18 at 20:27
1

When a checkbox is unchecked. The `ng-model` directive sets the property to `false`. It does not delete it. You can set it to another value with the `ng-false-value` directive. If you want you can use the `ng-change` directive to delete the property. – georgeawg Dec 19 '18 at 21:36

score 1 · Answer 2 · answered Dec 19 '18 at 16:46

The simplest approach might be...

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="game.isSelected"> {{game.game}}
  </li>
</ul>

In your controller:

    $scope.score_submission = function(){
        $scope.answers = [];
        for(var i=0; i < $scope.games.length) {
            if($scope.games[i].isSelected) $scope.answers.push($scope.games[i].game_id);
        }
    }

The only small downside of this solution is that you manipulate $scope.games - but I don't see a big disadvantage here as long as the lists are not too big.

Get selected values of checkbox group Angular 1.6

2 Answers2