AngularJS 使用工厂来计算对对象的更改

Question

我想做一个简单的工资计算器，这样你就可以得到一份员工名单以及他们目前的费率和工作时间，你可以操纵费率和工作时间来计算出哪些员工的成本最高。

我有以下包含在codepen中的内容。

我试图将我的所有逻辑保留在工厂中，但是尽管我知道员工模型正在更新，但我无法通过这种方法更新薪酬模型。

<div ng-app="app">
        <div ng-controller="MainCtrl">
          <table>
            <tr><td>name</td><td>rate</td><td>hours</td></tr>
            <tr ng-repeat="s in staff">
                <td>{{s.name}}</td>
                <td><input ng-keyup="keyPress(s.rate)" ng-model="s.rate"></td>  
                <td><input ng-keyup="keyPress(s.hours)" ng-model="s.hours"></td>
            </tr>
            </table>
          <table>
            <tr><td>name</td><td>pay</td></tr>
            <tr ng-repeat="b in CalcPay">
                <td>{{b.1.name}}</td>
                <td>{{b.1.pay}}</td>
            </tr>
            </table>          
    </div>
</div>
<script>
var app = angular.module('app', []);
app.factory('staffFactory', function ($http, $compile, $rootScope, $controller) {
    var staff = [
        {"id": "1","name": "Kate","rate": "10", "hours": "10"},
        {"id": "2","name": "John","rate": "20", "hours": "10"},
        {"id": "3","name": "Matt","rate": "15", "hours": "10"}
    ];

    var unique = {},
        distinct = [];
    for (var i in staff) {
        if (typeof (unique[staff[i].id]) == "undefined")  {
            distinct.push(staff[i].id);
        }
        unique[staff[i].id] = unique[staff[i].id] || {pay:0};
        unique[staff[i].id].name = staff[i].name;
        unique[staff[i].id].pay += (parseInt(staff[i].rate, 10) * parseInt(staff[i].hours, 10));
    }

    var pay = [];
    for (var p in unique) {
        pay.push([p, unique[p]]);
        pay.sort(function (a, b) {
            return (b[1].pay - a[1].pay);
        });
    }

    var staffService = {};
    staffService.allStaff = function () {
        return staff;
    };

    staffService.CalcPay = function () {
        return pay;
    };

    return staffService;
});

app.controller('MainCtrl', ['$scope', 'staffFactory', function ($scope, staffFactory) {
    $scope.staff = staffFactory.allStaff();
    $scope.CalcPay = staffFactory.CalcPay();
    $scope.keyPress = function(keyCode){
        console.log($scope.staff);
        $scope.CalcPay = staffFactory.CalcPay();
    };    
}]);
</script>

当我将我的 CalcPay 放入控制器（见下文）或这个 codepen 时，我可以正常工作。

我读到的所有内容似乎都表明这不是最佳做法并且会减慢应用程序的速度，所以我正在寻找一种方法来完成此操作而不依赖于控制器中的功能？

如何实现？

app.controller('MainCtrl', ['$scope', 'staffFactory', function ($scope, staffFactory) {
    $scope.staff = staffFactory.allStaff();
  function CalcPay () {
      var unique = {},
        distinct = [];
    for (var i in $scope.staff) {
        if (typeof (unique[$scope.staff[i].id]) == "undefined")  {
            distinct.push($scope.staff[i].id);
        }
        unique[$scope.staff[i].id] = unique[$scope.staff[i].id] || {pay:0};
        unique[$scope.staff[i].id].name = $scope.staff[i].name;
        unique[$scope.staff[i].id].pay += (parseInt($scope.staff[i].rate, 10) * parseInt($scope.staff[i].hours, 10));
    }

    var pay = [];
    for (var p in unique) {
        pay.push([p, unique[p]]);
        pay.sort(function (a, b) {
            return (b[1].pay - a[1].pay);
        });
    }
  return pay;
  };
    $scope.CalcPay = CalcPay();
    $scope.keyPress = function(keyCode){
        $scope.CalcPay = CalcPay();
    };    
}]);

Answer 1

问题是当您调用工厂的 CalcPay 方法时，该方法只是返回一个值 pay。您没有像在另一个代码片段中那样计算任何东西，在另一个代码片段中您正在计算控制器中的所有内容。因此，不是只返回支付，而是在 CalcPay 中正确处理所有计算逻辑，或者将所有逻辑保留在其他函数中并从 CalcPay 中调用它。

var app = angular.module('app', []);
app.factory('staffFactory', function ($http, $compile, $rootScope, $controller) {
    var staff = [
        {"id": "1","name": "Kate","rate": "10", "hours": "10"},
        {"id": "2","name": "John","rate": "20", "hours": "10"},
        {"id": "3","name": "Matt","rate": "15", "hours": "10"}
    ];

    function calcPayInner(){
    var unique = {},
        distinct = [],pay = [];
    for (var i in staff) {
        if (typeof (unique[staff[i].id]) == "undefined")  {
            distinct.push(staff[i].id);
        }
        unique[staff[i].id] = unique[staff[i].id] || {pay:0};
        unique[staff[i].id].name = staff[i].name;
        unique[staff[i].id].pay += (parseInt(staff[i].rate, 10) * parseInt(staff[i].hours, 10));
    }

        for (var p in unique) {
        pay.push([p, unique[p]]);
        pay.sort(function (a, b) {
            return (b[1].pay - a[1].pay);
        });
    }
    }
    var staffService = {};
    staffService.allStaff = function () {
        return staff;
    };

    staffService.CalcPay = function () {
        return calcPayInner();
    };

    return staffService;
});

AngularJS 使用工厂来计算对对象的更改

AngularJS use factory to calculate changes to object

html

javascript

angularjs

angularjs-scope

angularjs-ng-repeat