Невозможно просто добавить отдельные числа с кодом AngularJS - PullRequest
Новая
       0

Невозможно просто добавить отдельные числа с кодом AngularJS

0 голосов
/ 15 марта 2019

Это для простого калькулятора, использующего Angular JS .. Этот код будет выполнять основные математические операции, если вы сначала введете 2 числа для вычисления (например, 78-3) , но только 1-й номер будет отображаться, если вы добавите однозначные числа (например, 7-3). будет отображаться 7) .

Вторая проблема, с которой я столкнулся, заключается в том, что я могу выполнить функцию только один раз. Чтобы выполнить другую функцию, мне нужно обновить страницу, или она сохранит предыдущую информацию в поле.

Вот мой HTML и скрипт: 

    <!DOCTYPE HTML>
    <html ng-app="myCalc">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="assets/calculator.css">
        <script type="text/javascript" src="assets/angular.min.js"></script>
        <script type="text/javascript" src="assets/calculator.js"></script>
        <title>Calculator</title>
    </head>
    <body>

    <form class="calc" ng-controller="calcController">
    <p class="calc-display">
    <input type="text" name="output" value="{{output}}" class="calc-display- 
    input">
    </p>

     <p class="calc-row">
      <button type="button" class="calc-button" ng-click="updateOutput(7)" ng- 
      click="7">{{7}}</button>
      <button type="button" class="calc-button" ng-click="updateOutput(8)" ng- 
      click="8">{{8}}</button>
      <button type="button" class="calc-button" ng-click="updateOutput(9)" ng- 
      click="9">{{9}}</button>
      <button type="button" class="calc-button" value="/" ng- 
      click='operate("/")' >/</button>
      </p>
      <p>
      <button type="button" class="calc-button" ng-click="updateOutput(4)" ng- 
      click="4">{{4}}</button>
      <button type="button" class="calc-button" ng-click="updateOutput(5)" ng- 
      click="5">{{5}}</button>
      <button type="button" class="calc-button" ng-click="updateOutput(6)" ng- 
      click="6">{{6}}</button>
      <button type="button" class="calc-button" ng-click='operate("*")' 
      >x</button>
      </p>
      <p>
      <button type="button" class="calc-button" ng-click="updateOutput(1)" ng- 
      click="1">{{1}}</button>
      <button type="button" class="calc-button" ng-click="updateOutput(2)" ng- 
      click="2">{{2}}</button>
      <button type="button" class="calc-button" ng-click="updateOutput(3)" ng- 
      click="3">{{3}}</button>
      <button type="button" class="calc-button" ng-click='operate("-")' >- 
      </button>

      <p>
      <button type="button" class="calc-button" ng-click="updateOutput(0)" ng- 
      click="0">{{0}}</button>
      <button type="button" class="calc-button" ng-click='output = 0'>C</button>
      <button type="button" class="calc-button" ng-click="equal()">=</button>
      <button type="button" class="calc-button" ng-click='operate("+")' >+ 
      </button>
      </p>
      </form>
      <script>
       var myCalc = angular.module('myCalc',[]);
       function calcController($scope) {
       $scope.output = "0";
       $scope.inOperation = false;
       $scope.num1 = 0;
       $scope.updateOutput = function(btn) {
       if($scope.newNumber){
           $scope.output = 0;  
       }
       if($scope.output == "0" || $scope.newNumber) {
           $scope.output = btn;
           $scope.newNumber = false;
       } else {
           $scope.output += String(btn);
       }
       };
       $scope.operate = function(op) {
       if($scope.output && !$scope.inOperation){
           $scope.num1 = $scope.output;
           $scope.output += op;
           $scope.inOperation = true;
       }else if($scope.output.length > $scope.num1.length+1){
           $scope.output = eval($scope.output);
           $scope.output += op;
       }
       };
       $scope.equal = function() {
       if($scope.output.length > $scope.num1.length+1){
           $scope.output = eval($scope.output);
       $scope.num1 = $scope.output;
       }else{
           $scope.output = $scope.num1;
       }
       };

       }
      myCalc.controller('calcController', calcController);
      </script>
      </body>

1 Ответ

0 голосов
/ 15 марта 2019

Следующий код исправляет две проблемы, которые вы упомянули в своем вопросе. Тем не менее, вы все равно должны сделать много проверок в отношении ваших требований. 

     var myCalc = angular.module('myCalc', []);

     function calcController($scope) {
         $scope.output = 0;
         $scope.pressed = false;
         $scope.updateOutput = function(btn) {
             if ($scope.pressed == false) {
                 $scope.output = btn;
                 $scope.pressed = true;
             } else {
                 $scope.output += String(btn);
             }
         };
         $scope.operate = function(op) {
             $scope.pressed = true;
             $scope.output += op;
         };
         $scope.equal = function() {
             if ($scope.output.length > 2)
                 $scope.output = eval($scope.output);
             $scope.pressed = false;
         };
         $scope.clear = function() {
             $scope.pressed = false;
             $scope.output = 0;
         }
     };
     myCalc.controller('calcController', calcController);
<!DOCTYPE HTML>
<html ng-app="myCalc">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
    <title>Calculator</title>
</head>

<body>

    <form class="calc" ng-controller="calcController">
        <p class="calc-display">
            <input type="text" name="output" ng-model="output" class="calc-display- 
    input">
        </p>

        <p class="calc-row">
            <button type="button" class="calc-button" ng-click="updateOutput(7)" ng- click="7">{{7}}</button>
            <button type="button" class="calc-button" ng-click="updateOutput(8)" ng- click="8">{{8}}</button>
            <button type="button" class="calc-button" ng-click="updateOutput(9)" ng- click="9">{{9}}</button>
            <button type="button" class="calc-button" ng-click='operate("/")'>/</button>
        </p>
        <p>
            <button type="button" class="calc-button" ng-click="updateOutput(4)" ng- click="4">{{4}}</button>
            <button type="button" class="calc-button" ng-click="updateOutput(5)" ng- click="5">{{5}}</button>
            <button type="button" class="calc-button" ng-click="updateOutput(6)" ng- click="6">{{6}}</button>
            <button type="button" class="calc-button" ng-click='operate("*")'>x</button>
        </p>
        <p>
            <button type="button" class="calc-button" ng-click="updateOutput(1)" ng- click="1">{{1}}</button>
            <button type="button" class="calc-button" ng-click="updateOutput(2)" ng- click="2">{{2}}</button>
            <button type="button" class="calc-button" ng-click="updateOutput(3)" ng- click="3">{{3}}</button>
            <button type="button" class="calc-button" ng-click='operate("-")'>- 
      </button>

            <p>
                <button type="button" class="calc-button" ng-click="updateOutput(0)" ng- click="0">{{0}}</button>
                <button type="button" class="calc-button" ng-click="clear()">C</button>
                <button type="button" class="calc-button" ng-click="equal()">=</button>
                <button type="button" class="calc-button" ng-click='operate("+")'>+ 
      </button>
            </p>
    </form>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...