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

Это для простого калькулятора с использованием 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>

html angularjs

15.03.2019 17:42

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

     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>

15.03.2019 18:38

Другие вопросы по теме

AngularJS data-ng-model работает только в том же <div>

Как указать ng-опции для массива объектов?

Angularjs выделить первый элемент в выборе

Как использовать фильтр ng-repeat с переменной

Как получить данные из родительской таблицы в sequenceize

Прочитать файл CSS в angularjs

Как отобразить сообщение об ошибке, когда пароли не совпадают в Angularjs?

Обещание вызывается дважды в AngularJS

Как отображать амчарты между датами с помощью angularjs

Angular.js: создайте регулярное выражение для нескольких специальных символов

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

Ответы 1

Другие вопросы по теме

Похожие вопросы