Capturing checkbox values to table - angularjs

Question

I'm trying to create a form that will capture input, select and checkbox values and post them to a table. Everything seems to be working fine, with the exception of the checkboxes. What am I doing wrong?
https://jsfiddle.net/mujaji/uvkzmyox/8/
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.jobtypes = ['accountant', 'janitor', 'ceo', 'receptionist'];
$scope.hobbies = [{name: "long walks on the beach", id: "1", isChecked: false},{name: "eating cheese", id: "2", isChecked: false},{name: "writing haikus", id: "3", isChecked: false},{name: "looking for bigfoot", id: "4", isChecked: false},{name: "watching police academy", id: "5", isChecked: false}];
$scope.personalDetails = [
{
'fname':'Muhammed',
'lname':'Shanid',
'jobtype': 'ceo',
'email':'shanid#shanid.com',
'active': true,
'hobbies': [{name: "long walks on the beach", id: "1"},{name: "watching police academy", id: "5"}]
},
{
'fname':'John',
'lname':'Abraham',
'jobtype': 'accountant',
'email':'john#john.com',
'active': true,
'hobbies': [{name: "writing haikus", id: "3"},{name: "looking for bigfoot", id: "4"}]
},
{
'fname':'Roy',
'lname':'Mathew',
'jobtype': 'janitor',
'email':'roy#roy.com',
'active': false,
'hobbies': [{name: "eating cheese", id: "2"}]
}];
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
'jobtype': personalDetails.jobtype,
});
$scope.PD = {};
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function (personalDetails) {
personalDetails.selected = $scope.selectedAll;
});
};
}]);

Answer 1

The problem your facing is caused by the fact that hobbies and their checked state is outside the scope of your addNew(personalDetails) function.
Although not ideal for angular, something like this would work:
$scope.addNew = function(personalDetails) {
//get all checked hobbies
let selectedHobbies = [];
$scope.hobbies.forEach(function(hobby) {
if (hobby.isChecked) selectedHobbies.push(hobby);
});
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
'jobtype': personalDetails.jobtype,
'hobbies': selectedHobbies
});
$scope.PD = {};
};
EDIT
The answer above is really a pure javascript approach to filtering by selected hobbies. A more 'angular' approach would be to break your filter logic out into its own function so that you're not mixing concerns. For example:
Add the 'filterFilter' dependency to your controller:
app.controller("ListController", ['$scope','filterFilter',
function($scope, filterFilter) { ... }
then in your controller, define an array to hold your selected hobbies and add a filter helper to filter by isChecked:
$scope.hobbiesSelection = [];
$scope.selectedHobbies = function selectedHobbies() {
return filterFilter($scope.hobbies, { selected: true });
};
place a watch on the hobbies object to watch for changes to selected hobbies:
$scope.$watch('hobbies|filter:{isChecked: true}', function (hobbies) {
$scope.hobbiesSelection = hobbies;
}, true);
and finally, you can update your addNew() method to simply be:
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
'jobtype': personalDetails.jobtype,
'hobbies': $scope.selectedHobbies
});
$scope.PD = {};
};
So while there is a bit more code (and complexity) there for this example, you are separating the logic from the data a bit better. There is working example here: https://jsfiddle.net/mt0tvkwm/