Get Selected check box items from a click of a button

Question

How can I go about getting checked check box item's ID in a repeated list from a click of a button and add items to a variable / Array for later use?

html:

<input id="btnCheck" type="button" value="Next" ng-click="addSelected()" />    
<div ng-controller="movieController">
        <ul>
            <li ng-repeat="movie in Movies">
                    <input id="chkBox-{{ movie.MovieID }}"
                         type="checkbox"
                         ng-checked="selection.indexOf(movie.MovieID) > -1"
                         ng-click="toggleSelection(movie.MovieID)"
                    />
            </li>
        </ul>
    </div>

Script:

$scope.AddSelected = function () {
    var selected = $scope.selection
    console.log(selected);
}

$scope.selection = [];
$scope.toggleSelection = function toggleSelection(movie) {
    var idx = $scope.selection.indexOf(movie);
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }
    else {
        $scope.selection.push(movie);
    }
};

possible duplicate of [How can AngularJS bind to list of checkbox values?](http://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values) — dting, Apr 29 '15 at 07:28
Actually the answer in that post helped me, but not entirely. After the selection has been made, how do I access the $scope.selection values with a click of a button, say console.log it and view the objects or save it in a session variable. Maybe my approach to all this is all wrong. Bare with me guys I'm still really fresh to angular. — redM, Apr 29 '15 at 12:15

score 0 · Answer 1 · answered Apr 29 '15 at 07:20

0

You can use ng-options for multiple select. More usefull;

<select name="movies" ng-model="selectedMovieIDs" 
ng-options="m.MovieID as m.MovieID for m in movies">

</select>

More more info : ngOptions

answered Apr 29 '15 at 07:20

hurricane

6,521
2
34
44

Pankaj Parkar · Accepted Answer · 2015-04-29T12:27:03.443

0

You could create a custom filter which would return a selected value id, for that you need pass two parameters to filter 1st parameter will perform check, if it is true then 2nd parameter property array will be return from the filter.

Markup

<body ng-app="app">
  <div ng-controller="movieController">
    {{(Movies | returnPropertyWhenCheckedTrue: 'checked' :'MovieID')}}
    <ul>
      <li ng-repeat="m in Movies">
        <input id="chkBox-{{ m.MovieID }}" type="checkbox" ng-model="m.checked"/>
      </li>
    </ul>
  </div>
</body>

Filter

app.filter('returnPropertyWhenCheckedTrue', function() {
  return function(array, propertyToChecked, property) {
    var returnArray = [];
    angular.forEach(array, function(value, index) {
      if (value[propertyToChecked])
        returnArray.push(value[property]);
    });
    return returnArray;
  }
});

Working Plunkr

edited Apr 29 '15 at 12:27

answered Apr 29 '15 at 07:23

Pankaj Parkar

134,766
23
234
299

Isn't all checkboxes will have same model? Also all movies need to be in an array, since you can check multiple movies. – jcubic Apr 29 '15 at 07:38
@jcubic I'm creating inside a `ng-repeat` that will be created inside child scope.so that would be unique in anyway.more proper way would be do `m.checked` – Pankaj Parkar Apr 29 '15 at 07:41
I find "ng-change="checked && $parent.selectedMovie = m.MovieID"" a little vague do you mind explaining? – redM Apr 29 '15 at 09:50
@redM update `selectedMovie` only when check box is `checked`, if checkbox is not checked then condition will get false & `$parent.selectedMovie` will not update – Pankaj Parkar Apr 29 '15 at 09:52
Sorry I'm a little slow with this, I don't think this is what I'm after. I'll make an edit to the question. – redM Apr 29 '15 at 11:30
Sorry I can't requires 15 rep. – redM Apr 30 '15 at 07:56
@redM oh sorry I forgot – Pankaj Parkar Apr 30 '15 at 07:58

Get Selected check box items from a click of a button

2 Answers2