1

angularJSを学んでいます。angularJSを使用して電卓を試しました。2 つのコンボ ボックスには入力があり、もう 1 つのコンボ ボックスには操作があります。ユーザーがボタンをクリックすると、ユーザーが選択した操作に基づいて結果を表示する必要があります。しかし、出力が表示されない理由を見つけることができませんでした。手伝っていただけませんか

(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

2

outputコントローラーコンテキストで利用可能なメソッドを呼び出す必要があります。

this内部で使用しているときにコンテキストの問題を回避するには、コントローラーでfunction作成しvar vm = this;、コントローラー全体で置き換えます。thisvm

マークアップ

<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));
  };

プランカー

アップデート

を使用ng-optionsして、算術演算中に型変換を回避することができます。これらの値ng-repeatをレンダリングするために を使用すると、 に変換されてから、再びbyにキャストする必要があるため、ここで使用する方が適切です。optionsstringnumberparseIntng-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 に答える