AngularJSの部門に基づいて従業員の給料を引き上げる方法は？

Question

私は給料、名、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を選択しています。

入力ボックスから部門とハイキングパーセンテージに基づいて給与を引き上げたいとします。

私はそれを達成する方法を得ていません。助けや指導を受けることができますか？

Answer 1

あなたは従業員の給与をハイキング行うための関数を呼び出してから、

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    
 
    \t $scope.filteredDept = []; 
 
    \t 
 
    $scope.employees = [ 
 
    \t {'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 = [ 
 
    \t {'id':1, 'name':'IT','selected':false}, 
 
     {'id':2, 'name':'Management','selected':false}, 
 
     {'id':3, 'name':'Marketing','selected':false} 
 
    ]; 
 
    
 
    $scope.sortEmp = function(dept_id){ 
 
    \t $scope.bool = $scope.departments.filter(function(e){ 
 
     \t if(e.id === dept_id){ 
 
       var idx = $scope.filteredDept.indexOf(e.name,0); 
 
       if(idx === -1){ 
 
       \t $scope.filteredDept.push(e.name); 
 
        $scope.filterEmpList(); 
 
        return 0; 
 
       } 
 
       else { 
 
       \t $scope.filteredDept.splice(idx,1); 
 
        $scope.filterEmpList(); 
 
        return 0; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
    $scope.filterEmpList = function(){ 
 
    \t $scope.filteredData = []; 
 
\t \t if($scope.filteredDept.length !==0){ 
 
     \t $scope.empFiltered = []; 
 
     \t angular.forEach($scope.filteredDept, function(val,key){ 
 
      \t $scope.filteredData = $scope.employees.filter(function(e){ 
 
        if(e.dept === val){ 
 
        return e; 
 
        } 
 
       }); 
 
\t \t \t \t angular.forEach($scope.filteredData, function(v,k){ 
 
       \t $scope.empFiltered.push(v); 
 
       });    
 
      }); 
 
     } 
 
     else{ 
 
     \t $scope.empFiltered = $scope.employees; 
 
     }  \t 
 
    }; 
 
    $scope.hikeSal = function(){ 
 
    \t var arr = []; 
 
     arr = $scope.empFiltered.map(function(e){ 
 
     \t if(e.hike === undefined){ 
 
      \t e.hike = 0; 
 
      } 
 
     \t e.hike = parseInt(e.hike) + $scope.hike; 
 
      e.hikeAmt = e.sal * ($scope.hike * 0.01); 
 
     \t e.sal += e.sal * ($scope.hike * 0.01); 
 
      //return e; 
 
     }); 
 
    }; 
 
});

<!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> 
 
    \t <input type="checkbox" ng-model="dept.selected" ng-click="sortEmp(dept.id)"/> {{dept.name}} 
 
    </label> 
 
</div> 
 
<table border='1'> 
 
\t <thead> 
 
    \t <tr> 
 
     \t <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"> 
 
     \t <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>

はそれがあなたはJavascript `マップを使用することができます

Answer 2

私は、最初の部分は正しい部門でものに従業員のリストをフィルタリングするためのもので、その後、あなたは自分の給与を変更することフィルタリングされたリスト上のforeachニーズに

を変更し、明らかに、employees.filter(e => e.dpt === department).forEach(e => e.sal = e.sal * (1+hikePercent))ような何かをするだろう。

- 編集 - https://jsfiddle.net/zd3vxpka/

Answer 3

まずあなたがボタンの上にNGクリックディレクティブを置きたいと思うでしょう。チェックボックスと同じように、コントローラのスコープ機能に割り当てます。あなたはすでにハイキング％バインディングを持っているので、コントローラ内のどこでもそれを使うことができます。すでに選択されている部門が選択されていますので、どの部門が選択されているかを知っています。それで、すべての情報に基づいて、ボタン上で行うng-click機能の中で、配列をフィルタリングして変更を加えることができます。

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

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