javascript - 使用 AngularJS 从两个不同的 $scopes 添加数字

Question

我是 Angular 的新手。我有两个正在运行的计算器，我正在尝试添加两个 $scope 值，GrandTotal 和 GrandTotalTwo，以获得总计两个总和 TotalSum。

Codepen

HTML

<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr>
            <th>Camp Fees</th>
            <th>Number of Campers</th>
            <th>Rates</th>
            <th>Totals</th>
        </tr>
        <tr ng-repeat="event in events">
            <td>{{event.name}}</td>
            <td><input placeholder="0" class="qty" type="number"
                       ng-model="quantity" min="0"
                       ng-change="recalc(event, quantity )" 
                       restrict-to="[0-9]" />
               </div>
            </td>
            <td>{{event.cost | currency : $}}</td>
            <td class="subTotal" placeholder="$0.00">
                {{ quantity*event.cost | currency : $}}
            </td>
        </tr>
    </table>
    <div>
        <h2>Camp Fee Total : {{GrandTotal | currency : $}}</h2>
    </div>
    <br>

    <div ng-controller="myControllerTwo">
        <table>
            <tr>
                <th>Accommodation Fees</th>
                <th>Rooms Needed</th>
                <th>Rates</th>
                <th>Totals</th>
            </tr>
            <tr ng-repeat="eventTwo in eventsTwo">
                <td>{{eventTwo.nameTwo}}</td>
                <td><input placeholder="0" class="qty" type="number"
                           ng-model="quantityTwo" min="0"
                           ng-change="recalcTwo(eventTwo, quantityTwo )"
                           restrict-to="[0-9]" />
                </td>
                <td>{{eventTwo.costTwo | currency : $}}</td>
                <td class="subTotal">{{ quantityTwo*eventTwo.costTwo | currency : $}}</td>
            </tr>
        </table>
        <div>
            <h2>Accommodation Fee Total : {{GrandTotalTwo | currency : $}}</h2>
        </div>
    </div>
</div>

<div ng-controller="ToAddTotal">
    <h2>Sum = {{TotalSum | currency : $}}</h2>
</div>

JS

(function() {
    var myApp = angular.module("myApp", []);
    myApp.controller("myController", ["$scope", myController]);
    var events = [{
        name: "Adults",
        cost: 485,
        itemTotal: 0
    }, {
        name: "Kids 13-18",
        cost: 394,
        itemTotal: 0
    }, {
        name: "Kids 4-12",
        cost: 307,
        itemTotal: 0
    }, {
        name: "Kids 0-3",
        cost: 100,
        itemTotal: 0
    }];

    function myController($scope) {
        $scope.events = events;
        $scope.recalc = function(item, quantity) {
            item.itemTotal = quantity * item.cost;
            $scope.GrandTotal = 0;
            var sum = 0;
            angular.forEach($scope.events, function(event) {
                $scope.GrandTotal = $scope.GrandTotal + event.itemTotal;

                $scope.GrandTotal == NaN ? "custom msg" : $scope.GrandTotal;
                // console.log($scope.GrandTotal);
            })

        };
    }

    myApp.controller("myControllerTwo", ["$scope", myControllerTwo]);
    var eventsTwo = [{
        nameTwo: "Hotel Style Rooms:",
        costTwo: 535, //Not relevant info (display: none in css - line:745)
        itemTotalTwo: 0 //Not relevant info (display: none in css - line:745)

    }, {
        nameTwo: "First Room",
        costTwo: 535,
        itemTotalTwo: 0
    }, {
        nameTwo: "Additional Room(s)",
        costTwo: 445,
        itemTotalTwo: 0
    }, {
        nameTwo: "RV Sites",
        costTwo: 175,
        itemTotalTwo: 0
    }];

    function myControllerTwo($scope) {
        $scope.eventsTwo = eventsTwo;
        $scope.recalcTwo = function(item, quantityTwo) {
            item.itemTotalTwo = quantityTwo * item.costTwo;
            $scope.GrandTotalTwo = 0;
            var sumTwo = 0;
            angular.forEach($scope.eventsTwo, function(eventTwo) {
                $scope.GrandTotalTwo = $scope.GrandTotalTwo + eventTwo.itemTotalTwo;

                $scope.GrandTotalTwo == NaN ? "custom msg" : $scope.GrandTotalTwo;
                // console.log($scope.GrandTotal);
            })

        };
    }

    function ToAddTotal($scope) {
        $scope.TotalSum = function() {
            return $scope.GrandTotal * 1 + $scope.GrandTotalTwo * 1;
        };
    }
})();

Answer 1

您可以使用 ng-change 和 ng-model 指令执行所有操作——无需自定义代码:

1. 将所有内容放在同一个 Controller 中
2. 在输入上设置 ng-change 属性以设置总数:[为清楚起见进行简化] ng-change="$parent.TotalSum = $ parent.GrandTotal + $parent.GrandTotalTwo"
3. 将输出的 ng-model 属性设置为 TotalSum