CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-scope
Vetrivel Pandiyarajan
Vetrivel Pandiyarajan

Reputation: 646

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

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.

enter image description here

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>

Upvotes: 2

Views: 1066

Answers (1)

Alon Shmiel
Alon Shmiel

Reputation: 7121

You can try this:

  1. 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.
  2. 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>

Upvotes: 2

Related Questions