Angular benutzerdefinierte Rechner mit mehreren Funktionen

Ich brauche etwas Hilfe mit einem Testrechner.
Ich habe geschafft, die Add-Funktionalität arbeiten, aber ich bin stecken auf, was ich als nächstes tun muss, um eine zusätzliche Funktionalität wie Multiplizieren hinzufügen, wenn die Schaltfläche Berechnen gedrückt wird.Angular benutzerdefinierte Rechner mit mehreren Funktionen

Hier ist ein JSFiddle Link, und ich werde auch den größten Teil des Codes hinzufügen.
Ich wählte Angular, aber ein jQuery Beispiel würde auch gut.

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>

Quelle

2016-11-25 bo3m

Aktualisieren Sie Ihre AddtoTotal Funktion mit diesem:

$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; 
    }

Quelle

2016-11-27 13:39:39 jtsnr

Angular benutzerdefinierte Rechner mit mehreren Funktionen

Antwort

Verwandte Themen