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

【问题标题】：What is the issue with this sample code in Angular JsAngular Js中的这个示例代码有什么问题
【发布时间】：2016-02-03 06:28:00
【问题描述】：

我正在学习 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>

谢谢马尼文南

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-controller angularjs-controlleras

【解决方案1】：

没有方法名show

尝试拨打output

这样

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

N:B：

在输出中

改一下

this.calculateValues

到

this.calculate

因为没有名为calculateValues的方法

CODEPEN

【讨论】：

@Anand 感谢伙伴提供的链接 codepend 。我必须添加一些额外的代码。
非常感谢.. 成功了。但我需要了解我们应该在函数中的变量（ex +value1 + +value2）中添加“+”。
如果有 + 附加变量，它将被视为数字而不是字符串@Mani
非常感谢@Anik .. 现在我明白了

【解决方案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

【讨论】：

另外不要忘记解析计算方法的 value1 和 value2 因为 + 运算符只会连接两个值
是的，你是正确的..但是如果我们在这里使用 ng-options 就不会出现这个问题
@ThisIsMarkSantiago 检查更新的答案..我已经添加了这部分
我对你的回答投了赞成票，包括/覆盖了那部分
@Mani 很高兴为您提供帮助..谢谢 :)