Question

我正在学习angularJS。我尝试过使用angularJS的计算器。两个具有输入和另一个组合框的组合框正在进行操作。当用户单击该按钮时，它必须根据用户选择的操作显示结果。但我无法找到为什么它没有显示任何输出。你能帮我吗

(function(angular) {
  'use strict';
  angular.module('calculate', [])
    .controller('CalculateController', function() {
      this.input1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      this.input2 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      this.selectedInput1 = 0;
      this.selectedInput2 = 0;
      this.selectedOpr = '=';
      this.operations = ['*', '/', '+', '-'];
      this.calculate = function calculateValues(value1, value2, opr) {
        alert('coming inside calculate function..');
        if (opr == '+') {
          return (value1 + value2);
        } else if (opr == '-') {
          return (value1 - value2);
        } else if (opr == '*') {
          return (value1 * value2);
        } else if (opr == '/') {
          return (value1 / value2);
        }

      };
      this.output = function show() {
        alert('Calling function..');
        alert('Output is :' + this.calculateValues(this.selectedInput1, this.selectedInput2, this.selectedOpr));
      };
    });
})(window.angular);


 <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-2-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="invoice1.js"></script>
</head>
<body >
  <div ng-app="calculate" ng-controller="CalculateController as calc">
  <b>Invoice:</b>
  <div>
   Input 1:
    <select ng-model="calc.selectedInput1">
      <option ng-repeat="c in calc.input1">{{c}}</option>
    </select>
  </div>
  <div>
    Input 2:
    <select ng-model="calc.selectedInput2">
      <option ng-repeat="d in calc.input2">{{d}}</option>
    </select>
  </div>
  <div>
    Operation:
    <select ng-model="calc.selectedOpr">
      <option ng-repeat="e in calc.operations">{{e}}</option>
    </select>
  </div>
  <div>
    <button class="btn" ng-click="calc.show()">Pay</button>
    <br>

  </div>
</div>
</body>
</html>

由于马尼万南

Answer 1

没有方法名称# add remote for local directory git remote add origin https://github.com/Harin-Kaklotar/ProjectWithNewBoston.git # add all file to stage git add -A # commit your code git commit -m 'first commit' # pull to update the changes from remote git pull origin master # push to remote git push origin master

尝试拨打show而不是

喜欢这个

output

<强> N：乙：

输出中的

更改此

<button class="btn" ng-click="calc.output()">Pay</button>

到

this.calculateValues

因为没有名为this.calculate的方法

CODEPEN

Answer 2

您需要调用控制器上下文中可用的output方法。

在控制器中使用this内function创建var vm = this;并在整个控制器中将this替换为vm时，可以避免上下文问题。

<强>标记

<button class="btn" type=="button" ng-click="calc.output()">Pay</button>

此处输出函数应该看起来需要将this.calculateValues更改为this.calculate

<强>代码

  this.output = function show() {
    alert('Calling function..');
    alert('Output is :' + vm.calculate(vm.selectedInput1, vm.selectedInput2, vm.selectedOpr));
  };

Plunkr

<强>更新

在执行arithematic操作时，您可以使用ng-options来避免类型转换，因为当您使用ng-repeat渲染options时会发生什么情况会将这些值转换为{{1}然后你需要再次string将它们转换为number，这样parseInt会更好用。

ng-options

Updated Plunkr

Angular Js

2 个答案: