具有多種功能的角度定製計算器

我需要一些測試計算器幫助。
我設法使添加功能的工作，但我堅持我下一步要做什麼，以添加一個額外的功能，如按下計算按鈕時乘以工作。具有多種功能的角度定製計算器

這是一個JSFiddle Link，我還會添加大部分代碼。
我選擇了Angular，但一個jQuery示例也可以。

Examples of the calculator lifecycle might be:

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>

來源

2016-11-25 bo3m

更新您的這個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; 
    }

來源

2016-11-27 13:39:39 jtsnr

具有多種功能的角度定製計算器

回答

相關問題