Question

我想总结2个值并在第3个输入中显示结果：

HTML

<div ng-app="myApp">
  <div ng-controller="MainCtrl as mainCtrl">
    Main {{mainCtrl.foo}} <br/>
    <input type="text" ng-model="mainCtrl.foo"/>
    <input type="text" ng-model="mainCtrl.foo2"/>
    <input type="text" ng-model="mainCtrl.foo3"/>
    <br/>
  </div>
</div>

JS

var myApp = angular.module('myApp', []);

var my = {};

my.MainCtrl = function() {
  this.foo = '1';
  this.foo2 = '2'
  this.foo3 = this.sumUp();
}

my.MainCtrl.prototype.sumUp = function() {
  return this.foo + this.foo2;
}

// register all controllers
myApp.controller('MainCtrl', my.MainCtrl);

我的问题是第3个输入仅在文档加载时设置，但在前两个输入中键入值时不会动态更改。

小提琴： http://jsfiddle.net/K64wb/

Answer 1

对输入字段1和2使用参数 ng-change 。 U的解决方案;） ng-change =“mainCtrl.foo3 = mainCtrl.sumUp（）” 例如：

<div ng-controller="MainCtrl as mainCtrl">
    Main {{mainCtrl.foo}} <br/>
    <input type="text" ng-change="mainCtrl.foo3=mainCtrl.sumUp()" ng-model="mainCtrl.foo"/>
    <input type="text" ng-change="mainCtrl.foo3=mainCtrl.sumUp()" ng-model="mainCtrl.foo2"/>
    <input type="text" ng-model="mainCtrl.foo3"/>
    <br/>
</div>

Answer 2

当你的视图加载时，它只会触发一次控制器功能。所以它分配了foo和foo2，然后计算foo3，然后就完成了。永远不会再调用this.sumUp。

您可以像Mularski建议的那样在输入框中添加ng-change="mainCtrl.foo3=mainCtrl.sumUp()"。这会导致sumUp函数运行，并在每次输入值更改时分配给foo3。不过，我认为这看起来有些混乱。如果您决定添加更多输入框以进行累加，则必须记住将ng-change放在所有输入框上。

另一种方法是将sumUp函数本身分配给foo3，就像这样

this.foo3 = this.sumUp;

而不是像你正在做的那样分配sumUp的结果（this.foo3 = this.sumUp();）。然后在您的视图中，将foo3()分配给文本框的ng值：

<input type="text" ng-value="mainCtrl.foo3()"/>

（您无法将其分配给ng-model，因为该函数不可写）。

现在你告诉文本框始终显示该函数的结果，并且只要其任何依赖项发生变化（即foo和foo2），它就会触发。

这是Fiddle。

模型更新不会动态传播

2 个答案: