从 json 对象中删除项目复选框取消选中 angularjs

Question

我正在使用 angularjs v1.4.7。我已从 db 中获取结果集并将数据构造为 jsonobject。

$scope.originalEmpList= 
{
    "depts": [
        {
            "id": 1,
            "name": "IT",
            "software_team": "Ram, Rahim",
            "hr_team": "",
            "fin_team": ""
            
        },
        {
            "id": 2,
            "name": HR,
            "software_team": "",
            "hr_team": "Mohan",
            "fin_team": ""
        },
        {
            "id": 3,
            "name": PM,
            "software_team": "Ram",
            "hr_team": "Mohan",
            "fin_team": "John"
        }
    ],
    "softwarelist": [
        {
            "id": 1,
            "employee_name": "Ram",
            "employee_role": "Software",
            "dept_id": "1"
        },
        {
            "id": 2,
            "employee_name": "Rahim",
            "engineer_role": "Software",
            "dept_id": "1"
        },
        {
            "id": 3,
            "employee_name": "Ram",
            "engineer_role": "Software",
            "dept_id": "3"
        }
        
    ],
    "hrlist": [
        {
            "id": 4,
            "employee_name": "Mohan",
            "employee_role": "HR",
            "dept_id": "2"
        },
        {
            "id": 5,
            "employee_name": "Mohan",
            "employee_role": "HR",
            "dept_id": "3"
        }
        
    ],
    "finlist": [
        {
            "id": 6,
            "employee_name": "John",
            "employee_role": "Account",
            "dept_id": "3"
        }
        
    ]
}

并从 jsonobject 上方的 UI 侧显示下表

选择所有复选框 Dept Softwares HRs Fins

---

Checkbox1 IT 拉姆，拉希姆 Checkbox2 HR Mohan 复选框 3 PM Ram Mohan John

根据上面的复选框选择，将显示相应的团队成员。

例如：如果选中 Checkbox1，则仅显示该部门的名称。

Softwares : Ram, Rahim

类似地，如果我们选择 checkbox1 和 checkbox2 然后显示已检查部门的名称。

Softwares : Ram, Rahim
Hrs: Mohan 

如果我们选择所有 3 个复选框，则显示名称。

Softwares : Ram, Rahim, Ram
Hrs: Mohan, Mohan
Fins: John

原来的emp列表我保持不变，复制到employeeList中

$scope.employeeList = $scope.originalEmpList;

根据复选框选择更新对象。

$scope.UpdateOnCheckUncheck = function () {
    $scope.employeeList = $scope.originalEmpList;
    $scope.filteredArtist = [];
    
    // Collect unchecked depts  
    $scope.unchecked_depts = filterFilter($scope.employeeList.depts, 
       function (dept) {
        return !dept.Selected;
    });

    $scope.filteredSoftware= [];

    // Passing unchecked depts to remove from employeelist 
    angular.forEach($scope.unchecked_depts, function(dept) {
        $scope.updateCheckedDept(dept);
    });
};


$scope.updateCheckedDept = function(dept) {
    **// Approach 1 using reduce to copy into new array and then assign back to employeeList**
    Object.keys($scope.employeeList.softwarelist).reduce((object, 
      key) => {
       if (dept.id !=$scope.employeeList.softwarelist[key].dept_id) 
      {
       $scope.filteredArtist.push($scope.prismlist.artistlist[key]);
      }
     //return object
    }, {})

    $scope.employeeList.softwarelist= $scope.filteredSoftware;
    **//Approach 2 using splice
    angular.forEach($scope.employeeList.softwarelist, 
    function(soft, index){
    if(dept.id === soft.dept_id){
     $scope.employeeList.softwarelist.splice(index);
    } 
    });
    **//Approach 3 using slice**
};

//方法 4 - 考虑调用 DB 并在服务器端构造查询和过滤器，但在每次复选框更改时调用 db 代价高昂。

实际上在更新回 $scope.employeeList 后，它第一次工作正常取消选中但是当取消选中另一个复选框时我分配 $scope.employeeList = $scope.originalEmpList; 但这并没有从 db 获取初始数据而不是更新为第一次取消选中对象值。

在每次选中/取消选中如何更新员工列表以填充输出时，如上所示。还建议我在性能方面使用的最佳方法。提前致谢

Answer 1

$scope.employeeList = $scope.originalEmpList;

就像引用 $scope.originalEmpList。对 $scope.employeeList 的任何更新都与更新 $scope.originalEmpList 相同。

相反，您尝试使用 angular.copy() 创建数组的深层副本。

$scope.employeeList = angular.copy($scope.originalEmpList);