Angular Js中的这个示例代码有什么问题

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

没有方法名show

尝试调用 output 而不是

像这样

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

N:B:

在输出中

改变这个

this.calculateValues

到

this.calculate

因为没有名为 calculateValues

的方法

CODEPEN

Answer 2

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

为了避免在 function 中使用 this 时出现上下文问题，请在控制器中创建 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

更新

您可以使用 ng-options 来避免在进行算术运算时进行类型转换，因为这里当您使用 ng-repeat 进行渲染时会发生什么 options 这些值将转换为 string，那么你又需要通过 parseInt 将它们转换为 number，所以 ng-options 在这里使用会更好。

<select ng-model="calc.selectedInput1" ng-options="c for c in calc.input1"></select>
<select ng-model="calc.selectedInput2" ng-options="c for c in calc.input2"></select>
<select ng-model="calc.selectedOpr" ng-options="c for c in calc.operations"></select>

Updated Plunkr

Angular Js中的这个示例代码有什么问题

What is the issue with this sample code in Angular Js

angularjs

angularjs-ng-repeat

angularjs-controller

angularjs-controlleras