Bind all values from array using ng-checked (checkbox) in AngularJS

Question

I need to bind name and age of the person using checkbox, lopped by ng-repeat. I can get only the "name" from the array, i cant get the "age" from the array, can you please find out my mistake. I have attached all code in Snippet. Thanks In Advance.

Also I have attached image here please refer it.

 var myApp = angular.module('myApp', []); myApp.controller('checkBoxController', function ($scope) { $scope.employees=[{name:'John', age:25, gender:'boy'}, {name:'Jessie', age:30, gender:'girl'}, {name:'Johanna', age:28, gender:'girl'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, {name:'Peter', age:95, gender:'boy'}, {name:'Sebastian', age:50, gender:'boy'}, {name:'Erika', age:27, gender:'girl'}, {name:'Patrick', age:40, gender:'boy'}, {name:'Samantha', age:60, gender:'girl'}]; $scope.selection=[]; // toggle selection for a given employee by name $scope.toggleSelection = function toggleSelection(employeeName) { var idx = $scope.selection.indexOf(employeeName); // is currently selected if (idx > -1) { $scope.selection.splice(idx, 1); } // is newly selected else { $scope.selection.push(employeeName); } }; });

 <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> </head> <body> <div class="panel" ng-controller="checkBoxController"> <div class="check-box-panel"> <div ng-repeat="employee in employees"> <div class="action-checkbox"> <input id="{{employee.name}}" type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" /> <label for="{{employee.name}}"></label> {{employee.name}} {{employee.age}} </div> </div> </div> <div class="selected-items-panel"> <span class="selected-item">Selected Items:<span> <div ng-repeat="name in selection" class="selected-item"> [<span>Name: {{name}} </span>, <span>age: {{age}} </span>] </div> </div> </div> </body> </html>

Answer 1

You can try this:

in 'is newly selected', you pushed only the employee name. I changed it to push the whole object of the employee by finding him in the employees array.
in ng-repeat of selected-item, I run all the employees and print its data.

 var myApp = angular.module('myApp', []); myApp.controller('checkBoxController', function ($scope) { $scope.employees=[{name:'John', age:25, gender:'boy'}, {name:'Jessie', age:30, gender:'girl'}, {name:'Johanna', age:28, gender:'girl'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, {name:'Peter', age:95, gender:'boy'}, {name:'Sebastian', age:50, gender:'boy'}, {name:'Erika', age:27, gender:'girl'}, {name:'Patrick', age:40, gender:'boy'}, {name:'Samantha', age:60, gender:'girl'}]; $scope.selection=[]; // toggle selection for a given employee by name $scope.toggleSelection = function toggleSelection(employeeName) { const idx = $scope.selection.findIndex(employee => employee.name === employeeName); // is currently selected if (idx > -1) { $scope.selection.splice(idx, 1); } // is newly selected else { const employee = $scope.employees.find(employee => employee.name === employeeName); $scope.selection.push(employee); } }; });

 <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> </head> <body> <div class="panel" ng-controller="checkBoxController"> <div class="check-box-panel"> <div ng-repeat="employee in employees"> <div class="action-checkbox"> <input id="{{employee.name}}" type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" /> <label for="{{employee.name}}"></label> {{employee.name}} </div> </div> </div> <div class="selected-items-panel"> <span class="selected-item">Selected Items:<span> <div ng-repeat="employee in selection" class="selected-item"> [<span>Name: {{employee.name}} </span>, <span>age: {{employee.age}} </span>] </div> </div> </div> </body> </html>

Bind all values from array using ng-checked (checkbox) in AngularJS

Question

1 answers

solution1
2 ACCPTED 2018-11-03 07:02:28

Bind all values from array using ng-checked (checkbox) in AngularJS

Question

1 answers

solution1 2 ACCPTED 2018-11-03 07:02:28

solution1
2 ACCPTED 2018-11-03 07:02:28