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



我使用的是angularjs v1.4.7。我已经从数据库中获取了结果集,并将数据构造为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侧显示下表

选择所有复选框部门软件人力资源财务
复选框1 IT Ram,Rahim复选框2 HR Mohan复选框3 PM Ram Mohan John

根据以上复选框选择,将显示各自的团队成员。

例如:如果选中复选框1,则只显示该部门的名称

Softwares : Ram, Rahim

类似地,如果我们选择checkbox1和checkbox2,则显示检查的depts的名称。

Softwares : Ram, Rahim
Hrs: Mohan 

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

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

我保持了原始员工列表的不变,并将其复制到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-考虑在服务器端调用数据库并构造查询和过滤器,但每次更改复选框都会调用数据库,这将是非常昂贵的

事实上,在更新回$scope.employeeList后,它第一次取消选中时运行良好,但当取消选中另一个复选框时,我会分配$scope.employeeList = $scope.originalEmpList;,但这不会从数据库获取初始数据,而不是更新为第一次取消选择对象值。

在每次选中/取消选中如何更新employeelist以填充输出,如上所示。还建议我在性能方面使用的最佳方法。提前感谢

$scope.employeeList = $scope.originalEmpList;

类似于引用$scope.originalEmpList。对$scope.employeeList的任何更新都与更新$scope.originalEmpList.相同

相反,您可以尝试angular.copy((,它可以创建数组的深层副本。

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

最新更新