Passing checkbox values to JS

Question

I am new to Angular and learning by implementing a chat application. I am trying to pass the checkbox values to my JS code. Below are the snippets. The problem I am facing is I am unable to get the checked values in JS. I am getting i.value as undefined. Can you please point out where am i going wrong?

<div class="add-friends panel-primary panel" ng-show="addfriendsselected">
  <div class="panel-heading text-center" >Add Friends</div>
    <div class="panel_body">
      <div class="row" id=myForm>
        <ul class="list-group">

          <li class="list-group-item" ng-repeat = "user in friendslist">
            <div>
            {{user.firstName}}
            {{user.email}}
            &nbsp;&nbsp;
            <input type="checkbox" name="checkbox" value= "{{user}}">
            </div>
          </li>
          <div ui-view></div>
        </ul>
      </div>
    </div>
  <form id=userForm ng-submit="createGroup()"> 
    <input class="btn btn-default"  type="submit" value="Create Group"> 
    </form>
</div>

Controller

$scope.createGroup = function() {
   console.log("Entered createGroup ");

   $("input[type=checkbox]:checked").each(function(i){
     console.log("i.value :"+i.value);
     $scope.people.push( i.value );
   });
 console.log("$scope.people : " + JSON.stringify($scope.people));
            }

Using jQuery for this is all wrong. Use `ng-model` to bind inputs to your data model — charlietfl, May 01 '17 at 11:45
Strongly suggest reading [Thinking in angularjs when I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, May 01 '17 at 11:51

score 0 · Accepted Answer · answered May 01 '17 at 11:54

Just add object property as ng-model to the checkbox

<input type="checkbox" name="checkbox" ng-model="user.check">

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.friendslist = [{"firstName":"sss","email":"ss#gmail.com"}]
$scope.createGroup = function() {

  console.log($scope.friendslist)
}



})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="add-friends panel-primary panel" >
  <div class="panel-heading text-center" >Add Friends</div>
    <div class="panel_body">
      <div class="row" id=myForm>
        <ul class="list-group">

          <li class="list-group-item" ng-repeat = "user in friendslist">
            <div>
            {{user.firstName}}
            {{user.email}}
            &nbsp;&nbsp;
            <input type="checkbox" name="checkbox" ng-model="user.check">
            </div>
          </li>
          <div ui-view></div>
        </ul>
      </div>
    </div>
  <form id=userForm ng-submit="createGroup()"> 
    <input class="btn btn-default"  type="submit" value="Create Group"> 
    </form>
</div>
</div>

This helped. Thanks @sachila ranawaka – Sheetal May 01 '17 at 12:39 — Sheetal, May 01 '17 at 12:39
@Sheetal no problem :D – Sachila Ranawaka May 01 '17 at 13:02 — Sachila Ranawaka, May 01 '17 at 13:02

score 0 · Answer 2 · answered May 01 '17 at 11:58

0

Suggest you use ngModel directive as shown in the Angular documentation for input[checkbox].

Also, it might be useful for you to create a separate component (or directive) for each li in friendslist.

Hope it helps. Good luck;)

answered May 01 '17 at 11:58

Volodymyr Pantasenko

1
2

Passing checkbox values to JS

Controller

2 Answers2