1

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

谢谢马尼文南

4

2 回答 2

3

没有方法名show

尝试output打电话

像这样

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

注意：B：

在输出

改变这个

this.calculateValues

至

this.calculate

因为没有命名方法calculateValues

编解码器

于 2015-11-03T07:21:25.283 回答
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

更新

您可以ng-options在进行算术运算时使用来避免类型转换，因为当您ng-repeat用于渲染options这些值时会发生什么将被转换为string，然后您再次需要将它们转换为numberby parseInt，所以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>

更新了 Plunkr

于 2015-11-03T07:24:06.540 回答