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

我正在学习angularJS。我已经尝试了使用angularJS的计算器。两个组合框有输入端，另一个组合框正在进行操作。当用户点击按钮时，它必须根据用户选择的操作显示结果。但我无法找到它为什么没有显示任何输出。能否请你帮我Angular Js中的示例代码有什么问题

(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>

感谢马尼万南

来源

2015-11-03 Mani

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

为了避免背景的问题，而使用this内function建立在你的控制器var vm = this;与vm取代this整个控制器。

标记

<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避免类型转换，而这样做arithematic操作，因为在这里当您使用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

来源

2015-11-03 07:24:06

也不要忘记parseInt计算的值1和值2方法，因为'+'经营者只会将两者连接起来值 – ThisIsMarkSantiago

是你correct..but这个问题不会来，如果我们使用NG-选择这里 –

@ThisIsMarkSantiago检查更新answer..I've增加这部分 –

没有方法名show

尝试调用output代替

像这样

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

N：乙：

在输出

变化这

this.calculateValues

到

this.calculate

因为没有命名的方法calculateValues

CODEPEN

来源

2015-11-03 07:21:25

@Anand感谢队友的链接codepend。我必须添加一些额外的代码。 –

谢谢你这么多。它的工作。但我需要明白，我们应该添加在函数变量（如+值1 +值2）“+”。 – Mani

如果有+附加变量，它将被视为数字而不是字符串@Mani –

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

回答

相关问题