Question

AngularJS新手在这里。我试图制作一个非常简单的计算器，在Angular 1.5中添加两个值。 calc.result的值不会更新。

的index.html

<body ng-app="Calculator">
    <div class="container" ng-controller="calcCtrl as calc">
        <input type="number" ng-model="calc.input1">
         <span>+</span>
        <input type="number" ng-model="calc.input2">
         <span>=</span>
        <input type="number" ng-model="calc.result">
    </div>

    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/calc.js"></script>
</body>

JS / app.js

(function() {
    angular.module('Calculator', []);
})();

JS /控制器/ calc.js

(function() {
    angular
    .module('Calculator')
    .controller('calcCtrl', CalculatorControl);

    function CalculatorControl()
    {
        this.input1 = 0;
        this.input2 = 0;

        this.result = this.input1 + this.input2;
    }
})();

Answer 1

只需更改一行：

<span>=</span>
<input type="number" ng-value="calc.input1*1 + calc.input2*1">

Answer 2

将result作为一个函数来计算input1＆amp; input2。此外，按用户编辑结果部分也没有意义，因此，而不是input字段的结果使其仅显示字段。

<强>标记

<div class="container" ng-controller="calcCtrl as calc">
    <input type="number" ng-model="calc.input1">
     <span>+</span>
    <input type="number" ng-model="calc.input2">
     <span>=</span>
    <span ng-bind="calc.result()"></span>
</div>

<强>控制器

function CalculatorControl() {
    var self = this;
    self.input1 = 0;
    self.input2 = 0;

    self.result = function(){ 
      var input1 = !isNaN(self.input1) ? self.input1: 0,
          input2 = !isNaN(self.input2) ? self.input2: 0;
      return input1 + input2;
    }
}

Plunkr

Answer 3

您需要定义一个计算属性来访问依赖于控制器/作用域上其他属性的值。

为了实现它，javascript使你能够在对象上获得一个getter，你可以使用它来计算值，但仍然可以作为属性访问它，在你的情况下是它的结果。

您可以在MDN上阅读有关Object.defineProperty的更多信息。

这是你能做的。

＆＃13;

(function() {
  angular.module('Calculator', []);
})();

(function() {
  angular
    .module('Calculator')
    .controller('calcCtrl', CalculatorControl);

  function CalculatorControl() {
    this.input1 = 0;
    this.input2 = 0;

    Object.defineProperty(this, 'result', {
      get: function() {
        return this.input1 + this.input2;
      }
    });
  }
})();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="Calculator">
  <div class="container" ng-controller="calcCtrl as calc">
    <input type="number" ng-model="calc.input1">
    <span>+</span>
    <input type="number" ng-model="calc.input2">
    <span>=</span>
    <input type="number" ng-model="calc.result" ng-disabled="true" />
  </div>
</div>

＆＃13;

Answer 4

首先，您没有在click事件上调用add函数。

然后您正在初始化每个函数调用的值。

您需要在单独的方法中进行添加。

这个简单的AngularJS计算器的错误是什么？

4 个答案: