javascript - 具有多种功能的 Angular 自定义计算器

标签 javascript angularjs

我需要一些关于测试计算器的帮助。
我设法让“添加”功能正常工作,但我卡住下一步要做什么,以便在按下“计算”按钮时添加额外的功能,例如“乘法”。

这是一个JSFiddle Link ,我还将添加大部分代码。
我选择了 Angular,但 jQuery 示例也可以。

Examples of the calculator lifecycle might be:

JS

angular.module('myApp', [])

.controller('MyController', function ($scope) {

    $scope.items = [];

    $scope.addItem = function(){
        $scope.items.push({
            myOperation: $scope.selectedOperation,
            myNumber: $scope.selectedNumber 
        });

        $scope.selectedOperation = '';
        $scope.selectedNumber = '';
    };

    $scope.AddToTotal = function(){
        var total = 0;
        for(var i=0; i<$scope.items.length; i++){
            total += $scope.items[i].myNumber;
        }
        return total;
    }
});

HTML

<body ng-app="myApp">
<div ng-controller="MyController" class="container">
    <div class="row">
        <div class=".col-md-6 .col-md-offset-3">
            <form role="form" class="form-inline">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <!--Select-->
                            <select ng-model="selectedOperation" class="form-control input-lg" id="operators">
                                <option value="Add">Add</option>
                                <option value="Multiply">Multiply</option>
                                <option value="Apply">Apply</option>
                            </select>
                            <!--Input-->
                            <input ng-model="selectedNumber" class="form-control input-lg" type="number" placeholder="enter a number" />
                            <!--AddStep-->
                            <button ng-click="addItem()" id="btnAdd" class="btn btn-default btn-lg">Add step</button>
                            <p>{{selectedOperation}} {{selectedNumber}} = {{ AddToTotal()}}</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <ol id="instructions" class="jumbotron" style="margin-top: 2em;">
                            <li ng-repeat="item in items">{{item.myOperation}} {{item.myNumber}}</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <button ng-click="getTotal()" id="btnCalculate" class="btn btn-primary btn-lg">
                            Calculate
                        </button>
                        <button id="btnReset" class="btn btn-danger btn-lg">Reset</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <h2>Result: 
                            <span id="result" class="result">{{ AddToTotal() }}</span>
                        </h2>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

最佳答案

用这个更新你的 AddToTotal 函数:

   $scope.AddToTotal = function() {
      var total = 0;
      for (var i = 0; i < $scope.items.length; i++) {
        if ($scope.items[i].myOperation === 'Add') {
          total += $scope.items[i].myNumber;
        } else if ($scope.items[i].myOperation === 'Divide') {
          total /= $scope.items[i].myNumber;
        } else if ($scope.items[i].myOperation === 'Subtract') {
          total -= $scope.items[i].myNumber;
        } else if ($scope.items[i].myOperation === 'Multiply') {
          total *= $scope.items[i].myNumber;
        }
      }
      return total;
    }

关于javascript - 具有多种功能的 Angular 自定义计算器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40813331/

相关文章:

javascript - 如何将这个 jquery 样式颜色集中到 css 中?

javascript - 让div多次执行-200px?

angularjs - 如何在 AngularJS 中计算表达式内部的表达式

angularjs - Karma : Testing on multiple browsers, 每个在不同的代理上

javascript - 如何在 Controller 中 $inject 动态依赖

node.js - Angular 应用程序需要 Node.js

javascript - React-Native——如何使用react-navigation传递参数?

javascript - 自己的 pubsub 实现与使用 addEventListener() + CustomEvent 相比?

javascript - iframe 和 JavaScript 位于不同页面

AngularJS caseInsensitiveMatch 不工作