Question

我正在尝试创建一个表单来捕获输入，选择和复选框值并将它们发布到表格中。除了复选框之外，一切似乎都运行良好。我做错了什么？

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 = {};
    };

修改

上面的答案实际上是一种纯粹的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/

捕获复选框值到表

1 个答案: