Question

我正在使用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端显示下表

    Select All Checkbox  Dept  Softwares   HRs    Fins
    
    Checkbox1             IT    Ram, Rahim 
    Checkbox2             HR                Mohan 
    Checkbox3             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中获取而不是更新的初始数据。第一次取消选中对象值。

打开每次选中/取消选中如何更新employeelist来填充输出，如上所示。还建议我就性能而言最好的使用方法。预先感谢

Answer 1

$scope.employeeList = $scope.originalEmpList;

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

相反，您可以尝试angular.copy（）创建数组的深层副本。

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

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

1 个答案: