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>

Alon Shmiel · Accepted Answer · 2018-11-03 08:24:07Z

2

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>

edited Nov 3, 2018 at 8:24

answered Nov 3, 2018 at 7:02

Alon Shmiel

7,10927 gold badges95 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vetrivel Pandiyarajan Over a year ago

Thank you so much buddy. I will try this and let you know.

Vetrivel Pandiyarajan Over a year ago

And one more thing is there any possibility to add delete button from the list, if we delete one list then the check box will be automatically remove. Can you please guide me for this..?

Alon Shmiel Over a year ago

I don't understand. Add delete for each item?

Vetrivel Pandiyarajan Over a year ago

Yes dude, delete for each item

Vetrivel Pandiyarajan Over a year ago

and one more thing from the answer. if i check the checkbox the list will be added, but when i unchecked the list cant be remove from the list. From above snippet it show some error while uncheck it.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related