Захват значений флажка в таблице

Question

Я пытаюсь создать форму, которая будет захватывать значения ввода, выбора и флажка и отправлять их в таблицу. Кажется, что все работает нормально, за исключением флажков. Что я делаю не так?

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

Проблема ваша облицовочный вызвана тем, что домашние животные и их проверили состояние выходит за рамки вашего addNew(personalDetails) функции.

Хотя не подходит для угловых, то, как это будет работать:

$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

Ответ выше действительно чистый Javascript подход к фильтрации по выбранным хобби. Более «угловой» подход заключался бы в том, чтобы разбить логику фильтра на свою собственную функцию, чтобы вы не смешивали проблемы. Например:

Добавить зависимость «filterFilter» к контроллеру:

app.controller("ListController", ['$scope','filterFilter', 
    function($scope, filterFilter) { ... } 

затем в контроллере, определить массив для хранения выбранных хобби и добавить вспомогательный фильтр для фильтрации isChecked:

$scope.hobbiesSelection = []; 
$scope.selectedHobbies = function selectedHobbies() { 
    return filterFilter($scope.hobbies, { selected: true }); 
}; 

разместить часы на hobbies объекта, чтобы наблюдать за изменениями в выбранных хобби:

$scope.$watch('hobbies|filter:{isChecked: true}', function (hobbies) { 
    $scope.hobbiesSelection = hobbies; 
}, true); 

и, наконец, вы можете обновить свой метод addNew() просто быть:

$scope.addNew = function(personalDetails){ 
    $scope.personalDetails.push({ 
     'fname': personalDetails.fname, 
     'lname': personalDetails.lname, 
     'email': personalDetails.email, 
     'jobtype': personalDetails.jobtype, 
     'hobbies': $scope.selectedHobbies 
    }); 
    $scope.PD = {}; 
}; 

Таким образом, хотя есть немного больше кода (и сложность) есть для этого примера, вы отделяете логику от данных НЕМНОГО лучше. Здесь есть рабочий пример: https://jsfiddle.net/mt0tvkwm/