如何根据AngularJS中的部门提高员工薪水?

时间:2017-10-24 12:36:58

标签: javascript angularjs

我有一系列对象,包括员工详细信息,例如薪水名称 dept id

JS:

$scope.filteredDept = [];

$scope.employees = [
    {'id':1, 'dept': 'IT', 'sal': 5000, 'name': 'ramesh'},
    {'id':2, 'dept': 'IT', 'sal': 4000, 'name': 'Girish'},
    {'id':3, 'dept': 'Management', 'sal': 10000, 'name': 'Kartik'},
    {'id':4, 'dept': 'Marketing', 'sal': 8000, 'name': 'Shenoy'},
    {'id':5, 'dept': 'Marketing', 'sal': 7000, 'name': 'Darvik'},
    {'id':6, 'dept': 'Management', 'sal': 17000, 'name': 'Ravi Kumar'}
];
$scope.empFiltered = $scope.employees;
$scope.departments = [
    {'id':1, 'name':'IT','selected':false},
    {'id':2, 'name':'Management','selected':false},
    {'id':3, 'name':'Marketing','selected':false}
];

$scope.sortEmp = function(dept_id){
    $scope.bool = $scope.departments.filter(function(e){
        if(e.id === dept_id){
            var idx = $scope.filteredDept.indexOf(e.name,0);
            if(idx === -1){
                $scope.filteredDept.push(e.name);
                $scope.filterEmpList();
                return 0;
            }
            else {
                $scope.filteredDept.splice(idx,1);
                $scope.filterEmpList();
                return 0;
            }
        }
    });
};
$scope.filterEmpList = function(){
    $scope.filteredData = [];
    if($scope.filteredDept.length !==0){
        $scope.empFiltered = [];
        angular.forEach($scope.filteredDept, function(val,key){
            $scope.filteredData = $scope.employees.filter(function(e){
                if(e.dept === val){
                 return e;
                } 
            });
            angular.forEach($scope.filteredData, function(v,k){
                $scope.empFiltered.push(v);
            });               
        });
    }
    else{
        $scope.empFiltered = $scope.employees;
    }       
};

HTML:

Hike percentage : <input type="number" ng-model="hike"/>
<button>Hike the salary</button>
<br>
Hike by dept : <br>
<div class="checkbox" ng-repeat="dept in departments track by $index">
  <label>
    <input type="checkbox" ng-model="dept.selected" ng-click="sortEmp(dept.id)"/> {{dept.name}}
  </label>
</div>
<table border="1">
  <thead>
      <tr>
          <th>Name</th>
            <th>Dept</th>
            <th>Hike Percentage</th>
            <th>Hike Amount</th>
            <th>Salary</th>
        </tr>
        <tr ng-repeat="emp in empFiltered track by $index">
          <td>{{emp.name}}</td>
            <td>{{emp.dept}}</td>
            <td>hike percentage</td>
            <td>hike amount</td>
            <td>{{emp.sal | currency: '&#8360; '}}</td>
        </tr>
    </thead>
</table>

在这里,我选择dept来根据所选复选框过滤employees表。

我想根据输入框中的部门和加息百分比来增加工资。

我没有得到如何实现它。能得到任何帮助或指导吗?

3 个答案:

答案 0 :(得分:0)

我会做类似employees.filter(e => e.dpt === department).forEach(e => e.sal = e.sal * (1+hikePercent))的事情,显然会根据您的需要进行修改

第一部分是将员工列表过滤到具有正确部门的员工列表,然后在每个过滤后的列表中更改他们的薪水。

- 编辑 - https://jsfiddle.net/zd3vxpka/

答案 1 :(得分:0)

首先,您要在按钮上添加ng-click指令。将其分配给控制器上的作用域功能,就像您对复选框所做的那样。您已经拥有远程%绑定,因此您可以在控制器中的任何位置使用它。您已经选择了部门,因此您知道选择了哪个部门。因此,基于所有这些信息,在按钮上进行的ng-click功能中,您可以过滤数组并进行更改。

<button ng-click="hikePay()">Hike the salary</button>

$scope.hikePay = function(){
   // use bound variables to manipulate the array
}

答案 2 :(得分:0)

您可以调用函数来提高员工的薪水,然后应用地图

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   
   	$scope.filteredDept = [];
   	
    $scope.employees = [
    	{'id':1, 'dept': 'IT', 'sal': 5000, 'name': 'ramesh'},
        {'id':2, 'dept': 'IT', 'sal': 4000, 'name': 'Girish'},
        {'id':3, 'dept': 'Management', 'sal': 10000, 'name': 'Kartik'},
        {'id':4, 'dept': 'Marketing', 'sal': 8000, 'name': 'Shenoy'},
        {'id':5, 'dept': 'Marketing', 'sal': 7000, 'name': 'Darvik'},
        {'id':6, 'dept': 'Management', 'sal': 17000, 'name': 'Ravi Kumar'}
    ];
    $scope.empFiltered = $scope.employees;
    $scope.departments = [
    	{'id':1, 'name':'IT','selected':false},
        {'id':2, 'name':'Management','selected':false},
        {'id':3, 'name':'Marketing','selected':false}
    ];
    
    $scope.sortEmp = function(dept_id){
    	$scope.bool = $scope.departments.filter(function(e){
        	if(e.id === dept_id){
                var idx = $scope.filteredDept.indexOf(e.name,0);
                if(idx === -1){
                	$scope.filteredDept.push(e.name);
                    $scope.filterEmpList();
                    return 0;
                }
                else {
                	$scope.filteredDept.splice(idx,1);
                    $scope.filterEmpList();
                    return 0;
                }
            }
        });
    };
    $scope.filterEmpList = function(){
    	$scope.filteredData = [];
		if($scope.filteredDept.length !==0){
        	$scope.empFiltered = [];
        	angular.forEach($scope.filteredDept, function(val,key){
            	$scope.filteredData = $scope.employees.filter(function(e){
                    if(e.dept === val){
                     return e;
                    } 
                });
				angular.forEach($scope.filteredData, function(v,k){
                	$scope.empFiltered.push(v);
                });               
            });
        }
        else{
        	$scope.empFiltered = $scope.employees;
        }    	
    };
    $scope.hikeSal = function(){
    	var arr = [];
        arr = $scope.empFiltered.map(function(e){
        	if(e.hike === undefined){
            	e.hike = 0;
            }
        	e.hike = parseInt(e.hike) + $scope.hike;
            e.hikeAmt = e.sal * ($scope.hike * 0.01);
        	e.sal += e.sal * ($scope.hike * 0.01);
            //return e;
        });
    };
});
&#13;
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
ercentage : <input type="number" ng-model="hike"/>
<button ng-click="hikeSal()">Hike the salary</button>
<br>
Hike by dept : <br>
<div class="checkbox" ng-repeat="dept in departments track by $index">
  <label>
  	<input type="checkbox" ng-model="dept.selected" ng-click="sortEmp(dept.id)"/> {{dept.name}}
  </label>
</div>
<table border='1'>
	<thead>
    	<tr>
        	<th>Name</th>
            <th>Dept</th>
            <th>Hike Percentage</th>
            <th>Hike Amount</th>
            <th>Salary</th>
        </tr>
        <tr ng-repeat="emp in empFiltered track by $index">
        	<td>{{emp.name}}</td>
            <td>{{emp.dept}}</td>
            <td>{{emp.hike}}</td>
            <td>{{emp.hikeAmt}}</td>
            <td>{{emp.sal | currency: '&#8360; '}}</td>
        </tr>
    </thead>
</table>
</div>
</body>
</html>
&#13;
&#13;
&#13;

希望有所帮助