AngularJS: 计算器操作按钮警报未更改

Question

我正在使用 angularJS 创建一个计算，我想包括的功能之一是直观地显示操作的描述（例如加、减、除等）。

在我的 HTML 中，我为我的操作按钮 '.function-button' 放置了一个 class 这是我使用 document.querySelectorAll(); 捕获的（我也尝试过 querySelector()），我这样做是为了在 if 语句中测试 .html() 等于一个操作（+、-、*、/），如果是，则提醒正在执行的操作。

问题是无论我点击哪个操作按钮都是加法操作。

我在 $scope.current() 函数中调用 $scope.currentOperation()。

$scope.current() 函数:

$scope.current = function(btn) {
      var last;
      if ($scope.justGotMath) {
        $scope.justGotMath = false;
        if (!$scope.isOperator(btn)) {
          $scope.stuff = [];
        }
      }
      btn = btn.toString();
      if (btn === '.') {
        last = $scope.stuff.pop();
        if ($scope.isOperator(last) || Math.ceil(last) !== parseInt(last)) {
          $scope.stuff.push(last);
        } else {
          last += '.';
          $scope.stuff.push(last);
          $scope.writeScreen();
          $scope.currentOperation();
        }
        return;
      }
      if ($scope.isOperator(btn)) {
        if (!$scope.stuff.length) {
          return;
        }
        last = $scope.stuff.pop();
        if (!$scope.isOperator(last)) {
          $scope.stuff.push(last);
        }
        $scope.stuff.push(btn);
      } else if ($scope.stuff.length) {
        last = $scope.stuff.pop();
        if ($scope.isOperator(last)) {
          $scope.stuff.push(last);
          $scope.stuff.push(btn);
        } else if (last.toString() === '0') {
          $scope.stuff.push(btn);
        } else {
          last += btn.toString();
          $scope.stuff.push(last);
        }
      } else {
        $scope.stuff.push(btn);
      }
      $scope.writeScreen();
      $scope.currentOperation();

      return this;
    };

当前操作函数：

 $scope.currentOperation = function(){
              var btnVal = angular.element(document.querySelectorAll('.function-button'));
              console.log(btnVal.html());
              if(btnVal.html() === '+') {
                  alert('add');
              }else if(btnVal.html() === '-'){
                  alert('subtract');
              }else if(btnVal.html() === '/') {
                  alert('divide');
              }else if(btnVal.html() === '*') {
                  alert('multiply');
              }
          };

操作按钮HTML:

<a ng-click="current('+')" href="javascript:void(0)" class="function-button  add">&plus;</a>
    <a ng-click="current('-')" href="javascript:void(0)" class="function-button subtract">&minus;</a>
    <a ng-click="current('*')" href="javascript:void(0)" class="function-button multiply">&times;</a>
    <a ng-click="current('/')" href="javascript:void(0)" class="function-button divide ">&divide;</a>

Answer 1

您需要将 html 元素命名存储在变量中或将其传递给 currentOperation 函数。现在所有的锚标记都具有相同的 class，因此当您的 'getElementById' 函数运行时，它 returns 第一个结果，即加法。

$scope.currentOperation(btn);

然后，您将更改您的 currentOperation 函数：

$scope.currentOperation = function(btnVal){
          console.log(btnVal);
          if(btnVal === '+') {
              alert('add');
          }else if(btnVal === '-'){
              alert('subtract');
          }else if(btnVal === '/') {
              alert('divide');
          }else if(btnVal === '*') {
              alert('multiply');
          }
      };

AngularJS: 计算器操作按钮警报未更改

AngularJS: calculator operation buttons alerts not changing

calculator

selectors-api

angularjs